Last active
February 3, 2018 05:28
-
-
Save aaronwaldon/d6cd51a5e4c50139e1dd to your computer and use it in GitHub Desktop.
Gulp workflow as of 3 Nov 2014
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
| { | |
| "name": "Your Project Name", | |
| "version": "0.0.0", | |
| "description": "", | |
| "devDependencies": { | |
| "gulp": "^3.8.9", | |
| "gulp-autoprefixer": "^1.0.1", | |
| "gulp-concat": "^2.4.1", | |
| "gulp-livereload": "^2.1.1", | |
| "gulp-minify-css": "^0.3.11", | |
| "gulp-newer": "^0.3.0", | |
| "gulp-notify": "^2.0.0", | |
| "gulp-plumber": "^0.6.6", | |
| "gulp-rename": "^1.2.0", | |
| "gulp-sass": "^1.2.2", | |
| "gulp-size": "^1.1.0", | |
| "gulp-uglify": "^1.0.1", | |
| "gulp-watch": "^1.1.0", | |
| "lazypipe": "^0.2.2", | |
| "node-sass": "1.0.3" | |
| } | |
| } |
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
| //load plugins | |
| var gulp = require('gulp'), | |
| autoprefixer = require('gulp-autoprefixer'), | |
| concat = require('gulp-concat'), | |
| livereload = require('gulp-livereload'), | |
| minifycss = require('gulp-minify-css'), | |
| newer = require('gulp-newer'), | |
| notify = require('gulp-notify'), | |
| plumber = require('gulp-plumber'), | |
| rename = require('gulp-rename'), | |
| sass = require('gulp-sass'), | |
| size = require('gulp-size'), | |
| uglify = require('gulp-uglify'), | |
| watch = require('gulp-watch'), | |
| path = require('path'), | |
| lazypipe = require('lazypipe'); | |
| //the title and icon that will be used for the Grunt notifications | |
| var notifyInfo = { | |
| title: 'Your Project Name', | |
| icon: path.join(__dirname, 'gulp.png') | |
| }; | |
| //glob patterns that are used more than once | |
| var scssGlob = 'source/scss/**/*.scss', | |
| jsIndividualGlob = 'source/js/individual/**/*.js', | |
| jsCombinedGlob = 'source/js/combined/**/*.js'; | |
| //error notification settings for plumber | |
| var plumberErrorHandler = function(err) { | |
| console.log( 'plumber error!' ); | |
| notify.onError({ | |
| title: notifyInfo.title, | |
| message: "Error: <%= err.message %>", | |
| sound: 'Pop' | |
| }); | |
| this.emit('end'); | |
| }; | |
| //processes scripts individually (doesn't combine them) | |
| var jsIndividualScripts = lazypipe() | |
| .pipe(plumber, {errorHandler: plumberErrorHandler}) | |
| .pipe(newer, { dest: 'html/assets/js', ext: '.min.js' }) | |
| .pipe(gulp.dest, 'html/js') | |
| .pipe(size, {showFiles: true}) | |
| .pipe(uglify) | |
| .pipe(rename, { suffix: '.min' }) | |
| .pipe(gulp.dest, 'html/js') | |
| .pipe(size, {showFiles: true}); | |
| //processes scripts collectively (combines them into one file) | |
| var jsCombinedScripts = lazypipe() | |
| .pipe(plumber, {errorHandler: plumberErrorHandler}) | |
| .pipe(newer, 'html/assets/js/main.min.js') | |
| .pipe(concat, 'scripts.js') | |
| .pipe(gulp.dest, 'html/assets/js') | |
| .pipe(size, {showFiles: true}) | |
| .pipe(uglify) | |
| .pipe(rename, { suffix: '.min' }) | |
| .pipe(gulp.dest, 'html/assets/js') | |
| .pipe(size, {showFiles: true}); | |
| //processes the scss | |
| var scssProcessing = lazypipe() | |
| .pipe(plumber, {errorHandler: plumberErrorHandler}) | |
| .pipe(sass, {outputStyle: ':compact'}) | |
| .pipe(autoprefixer, 'last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4') | |
| .pipe(gulp.dest, 'html/assets/css') | |
| .pipe(size, {showFiles: true}) | |
| .pipe(rename, { suffix: '.min' }) | |
| .pipe(minifycss) | |
| .pipe(gulp.dest, 'html/assets/css') | |
| .pipe(size, {showFiles: true}); | |
| //styles task | |
| gulp.task('styles', function() { | |
| return gulp.src(scssGlob).pipe(scssProcessing()); | |
| }); | |
| //scripts individual task | |
| gulp.task('scripts-individual', function() { | |
| return gulp.src(jsIndividualGlob).pipe(jsIndividualScripts()); | |
| }); | |
| //scripts combined task | |
| gulp.task('scripts-combined', function() { | |
| return gulp.src(jsCombinedGlob).pipe(jsCombinedScripts()); | |
| }); | |
| //watch task | |
| gulp.task('live', function() { | |
| livereload.listen(); | |
| //watch all .scss files | |
| gulp.watch(scssGlob, ['styles']); | |
| //watch each individual .js file | |
| watch(jsIndividualGlob).pipe(jsIndividualScripts()); | |
| //watch all combined .js files | |
| gulp.watch(jsCombinedGlob, ['scripts-combined']); | |
| //watch for changes on transpired templates, css, and js files | |
| gulp.watch([ | |
| 'craft/templates/**/*.twig', | |
| 'html/assets/js/**/*.min.js', | |
| 'html/assets/css/**/*.min.css' | |
| ], function(event) { | |
| gulp.src(event.path) | |
| .pipe(plumber()) | |
| .pipe(livereload()) | |
| .pipe(notify({ | |
| title: notifyInfo.title, | |
| icon: notifyInfo.icon, | |
| message: event.type + ': ' + event.path.replace(__dirname, '').replace(/\\/g, '/') + ' was reloaded', | |
| sound: 'Pop' | |
| }) | |
| ); | |
| }); | |
| }); | |
| //default task - one time styles and scripts | |
| gulp.task('default', ['styles', 'scripts-individual', 'scripts-combined']); |
%2520gulp.png){kind=link}
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
| Add an image named gulp.png to your projects root. The image should be 150px by 150px. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment