Skip to content

Instantly share code, notes, and snippets.

@J5Dev
Last active August 29, 2015 14:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save J5Dev/903fd9e813c76d3ccdba to your computer and use it in GitHub Desktop.
Save J5Dev/903fd9e813c76d3ccdba to your computer and use it in GitHub Desktop.
Gulp files to process all sass & js files then compress them. used within Laravel app with admin-site separation using Zurb Foundation
var gulp = require('gulp');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var phpunit = require('gulp-phpunit');
var concat = require('gulp-concat');
// directories
var appDir = "app"
var testsDir = appDir + '/tests';
var sassDir = 'app/scss';
var sassCacheDir = 'app/storage/.sass-cache';
var cssDir = 'public/assets/css';
var cssDirAdmin = 'public/assets/admin/css';
var jsDir = 'public/assets/js';
var jsDirAdmin = 'public/assets/admin/js';
var foundationJsDir = 'vendor/zurb/foundation/js/foundation';
var vendorJsDir = 'public/assets/js/vendor';
var vendorJsDirAdmin = 'public/assets/admin/js/vendor';
// compile the site sass
gulp.task('site-css-compile', function() {
return gulp.src(sassDir + '/styles.scss')
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: true}).on('error', gutil.log))
.pipe(gulp.dest(cssDir));
});
// compile the admin sass
gulp.task('admin-css-compile', function() {
return gulp.src(sassDir + '/admin/styles.scss')
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: true}).on('error', gutil.log))
.pipe(gulp.dest(cssDirAdmin));
});
// minifys the site scc
gulp.task('site-css-min', ['site-css-compile'], function() {
return gulp.src(cssDir + '/styles.css')
.pipe(minifycss())
.pipe(autoprefixer('last 4 version'))
.pipe(rename('styles.min.css'))
.pipe(gulp.dest(cssDir))
.pipe(notify({ message: "Site CSS Processed"}));
});
// minifys the admin css
gulp.task('admin-css-min', ['admin-css-compile'], function() {
return gulp.src('public/assets/admin/css/styles.css')
.pipe(minifycss())
.pipe(autoprefixer('last 4 version'))
.pipe(rename('styles.min.css'))
.pipe(gulp.dest('public/assets/admin/css'))
.pipe(notify({ message: "Admin CSS Processed"}));
});
// compile the owl carousel sass
gulp.task('owl-css-compile', function () {
return gulp.src(sassDir + '/owlcarousel/styles.scss')
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: true}).on('error', gutil.log))
.pipe(gulp.dest(cssDir + '/owlcarousel'));
});
// minifys the owl carousel css
gulp.task('owl-css-min', ['owl-css-compile'], function () {
return gulp.src(cssDir + '/owlcarousel/styles.css')
.pipe(minifycss())
.pipe(autoprefixer('last 4 version'))
.pipe(rename('styles.min.css'))
.pipe(gulp.dest(cssDir + '/owlcarousel'))
.pipe(notify({message: "Owl Carousel CSS Processed"}));
});
// collate the css tasks
gulp.task('all-css', ['site-css-compile', 'admin-css-compile', 'owl-css-compile', 'site-css-min', 'admin-css-min', 'owl-css-min'], function() {
});
// phpunit tests
gulp.task('phpunit', function() {
gulp.src(testsDir + '/**/*.php').pipe(phpunit());
});
// watcher task for css
gulp.task('cssWatcher', function() {
gulp.watch(sassDir + '/**/*.scss', ['all-css']);
});
// defaukt task used to trigger css & watcher functioinality
gulp.task('default', ['all-css', 'cssWatcher']);
// merge all foundation js files
gulp.task('merge-foundation-js', function () {
return gulp.src([foundationJsDir + '/foundation.js', foundationJsDir + '/*.js'])
.pipe(concat('all-foundation.js'))
.pipe(gulp.dest(jsDir))
.pipe(notify({ message: "Foundation js merged" }))
.on('error', gutil.log);
});
// merge all additional vendor js files
gulp.task('merge-vendor-js', function () {
return gulp.src(vendorJsDir + '/*.js')
.pipe(concat('all-vendor.js'))
.pipe(gulp.dest(jsDir))
.pipe(notify({message: "Vendor js merged"}))
.on('error', gutil.log);
});
// merge all vendor js files used for admin
gulp.task('merge-vendor-js-admin', function () {
return gulp.src(vendorJsDirAdmin + '/*.js')
.pipe(concat('all-vendor-admin.js'))
.pipe(gulp.dest(jsDirAdmin))
.pipe(notify({message: "Admin Vendor js merged"}))
.on('error', gutil.log);
});
// minifies merged foundation js file
gulp.task('minify-foundation-js', ['merge-foundation-js'], function () {
return gulp.src(jsDir + '/all-foundation.js')
.pipe(uglify({mangle: false}))
.pipe(rename('all-foundation.min.js'))
.pipe(gulp.dest(jsDir))
.pipe(notify({message: "Foundation js minified"}))
.on('error', gutil.log);
});
// minifies sites merged vendor js file
gulp.task('minify-vendor-js', ['merge-vendor-js'], function () {
return gulp.src(jsDir + '/all-vendor.js')
.pipe(uglify({mangle: false}))
.pipe(rename('all-vendor.min.js'))
.pipe(gulp.dest(jsDir))
.pipe(notify({message: "Vendor js minified"}))
.on('error', gutil.log);
});
// minifies merged admin vendor js file
gulp.task('minify-vendor-js-admin', ['merge-vendor-js-admin'], function () {
return gulp.src(jsDirAdmin + '/all-vendor-admin.js')
.pipe(uglify({mangle: false}))
.pipe(rename('all-vendor-admin.min.js'))
.pipe(gulp.dest(jsDirAdmin))
.pipe(notify({message: "Admin Vendor js minified"}))
.on('error', gutil.log);
});
// minifies sites js file
gulp.task('minify-js-site', function () {
return gulp.src(jsDir + '/site.js')
.pipe(uglify({mangle: false}))
.pipe(rename('site.min.js'))
.pipe(gulp.dest(jsDir))
.pipe(notify({message: "Site js minified"}))
.on('error', gutil.log);
});
// minifies admins js file
gulp.task('minify-js-admin', function () {
return gulp.src(jsDirAdmin + '/admin.js')
.pipe(uglify({mangle: false}))
.pipe(rename('admin.min.js'))
.pipe(gulp.dest(jsDirAdmin))
.pipe(notify({message: "Admin js minified"}))
.on('error', gutil.log);
});
// create single js file for use on site
gulp.task('create-js-site', ['minify-foundation-js', 'minify-vendor-js', 'minify-js-site'], function() {
return gulp.src([jsDir + '/jquery-2*.js', jsDir + '/all-foundation.min.js', jsDir + '/all-vendor.min.js', jsDir + '/site.min.js'])
.pipe(concat('full-site.min.js'))
.pipe(gulp.dest(jsDir))
.pipe(notify({message: "Full site js file created"}))
.on('error', gutil.log);
});
// create single js file for admin use
gulp.task('create-js-admin', ['minify-foundation-js', 'minify-vendor-js', 'minify-vendor-js-admin', 'minify-js-admin'], function () {
return gulp.src([jsDir + '/jquery-2*.js', jsDir + '/jquery-ui*.js', jsDir + '/all-foundation.min.js', jsDir + '/all-vendor.min.js', jsDirAdmin + '/all-vendor-admin.min.js', jsDirAdmin + '/admin.min.js'])
.pipe(concat('full-admin.min.js'))
.pipe(gulp.dest(jsDirAdmin))
.pipe(notify({message: "Full Admin js file created"}))
.on('error', gutil.log);
});
{
"devDependencies": {
"gulp": "^3.8.5",
"gulp-autoprefixer": "0.0.7",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.6",
"gulp-notify": "^1.4.0",
"gulp-phpunit": "^0.5.3",
"gulp-rename": "^1.2.0",
"gulp-ruby-sass": "^0.5.0",
"gulp-uglify": "^0.3.1",
"gulp-util": "^2.2.19"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment