Last active
August 29, 2015 14:03
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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