Front-End Workflows with Gulp

From time-to-time our front-end workflows can become pretty repetitive. Sometimes we attempt to manually compile pre-processed languages, minify & concatenate our code. In this session Bermon Painter will review common front-end workflows and how they can be automated with GulpJS. Front-end developers of any level are encouraged to attend.

This presentation covers:

• The concepts behind using Gulp as a build tool
• Differences between Gulp and Grunt
• How to use the Gulp API
• Step-by-step tutorial on how to write common workflow tasks
• Some of the best plugins currently around

Transcript

1. FRONT-END WORKFLOWS WITH GULP @BERMONPAINTER / Confoo
2. A BUILD SYSTEM. A TASK RUNNER. A WORKFLOW AUTOMATOR. Automate your mundane and repetitive tasks like preprocessing, minifying, concatenating, and optimizing files.
3. WORKFLOW & INSTALLATION
4. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
5. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
7. $ npm install -g gulp
8. $ sudo npm install -g gulp
9. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
10. $ npm init
11. { "name" : “gulp-project-name”, "version" : "0.0.0", }
12. $ npm install --save-dev gulp
13. { "name": "gulp-project-name, "version": "0.0.0", "devDependencies": { "gulp": "^3.8.8" } }
14. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
15. $ touch gulpfile.js
16. var gulp = require('gulp');
17. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
18. var gulp = require('gulp'); gulp.task('task-name', function() { . . . }); gulp.task('default', ['task-name', 'task-name']);
19. $ gulp task-name
20. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
21. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
22. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
23. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
24. Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
25. 3 PRIMARY CONCEPTS
26. PLUGINS The core of everything in Gulp. Do one thing. Do it well.
27. http://gulpjs.com/plugins/
28. STREAMS How you move from one task to another.
29. TASKS Allow us to interact with plugins.
30. GULP vs GRUNT
31. • Code over configuration • Configuration over code
32. • Code over configuration • Stream based • Configuration over code • File based
33. • Code over configuration • Stream based • Configuration over code • File based, heavy IO
34. FILE HANDLING IN GRUNT .scss .scss .scss .scss .css .min.css
35. FILE HANDLING IN GULP .scss .scss .scss concat() sass() minify() .min.css rename()
36. FILE HANDLING IN GULP .scss .scss .scss concat() sass() minify() .min.css rename() PIPE
37. CODE OVER CONFIGURATION
38. HIGH QUALITY PLUGINS
39. FAST/EFFICIENT, LOW IO
40. THE GULP API
41. gulp.task
42. gulp.task('name', ['dependencies'], function(done) { . . . });
43. gulp.task('build',['compile-sass', 'lint-js', 'compress-images']);
44. gulp.task('default', ['task-name', 'task-name']);
45. gulp.src
46. gulp.src(['source/**/*.js', '. . .'])
47. gulp.dest
48. gulp.src(['. . .', 'build/assets/**/*.js'])
49. gulp.src('./source/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./build/assets/css'));
50. gulp.watch
51. gulp.watch('source/**/*.scss', ['compile']);
52. gulp.task('watch', function () { gulp.watch('source/**/*.scss', ['compile']); }); watcher.on('change', function (event) { // added, changed or deleted files console.log('Event type: ' + event.type); // The path of the modified file console.log('Event path: ' + event.path); });
53. MAXIMUM CONCURRENCY
54. COMMON WORKFLOW TASKS
55. COMPILE SASS
56. npm install —save-dev gulp-ruby-sass
57. // Dependencies var sass = require('gulp-ruby-sass'); // Gulp task gulp.task('compile-sass', function(){ return gulp.src('source/sass/*.scss') .pipe(sass({sourcemap: true})) .pipe(gulp.dest('assets/css')); });
58. $ gulp compile-sass
59. COMPILE COFFESCRIPT
60. npm install —save-dev gulp-coffee
61. // Dependencies var coffee = require('gulp-coffee'); // Gulp Task gulp.task('compile-coffee', function() { gulp.src('./source/coffeescript/*.coffee') .pipe(coffee({bare: true}).on('error', gutil.log)) .pipe(gulp.dest('./assets/js')) });
62. $ gulp compile-coffee
63. COMPILE JADE
64. npm install —save-dev gulp-jade
65. // Dependencies var jade = require('gulp-jade'); // Gulp Task gulp.task('compile-jade', function() { var YOUR_LOCALS = {}; gulp.src('./source/*.jade') .pipe(jade({ locals: YOUR_LOCALS })) .pipe(gulp.dest('./build/')) });
66. $ gulp compile-jade
67. COMBINE
68. gulp.task('default', ['compile-sass', 'compile-jade', 'compile-coffee']);
69. STATIC SITE GENERATOR Excellent example courtesy of @andrewdc
70. var gulp = require('gulp'), gutil = require('gulp-util'), sass = require('gulp-sass'), rubysass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), fileinclude = require('gulp-file-include'), rename = require('gulp-rename'), notify = require('gulp-notify'), lr = require('tiny-lr'), livereload = require('gulp-livereload'), connect = require('gulp-connect'), plumber = require('gulp-plumber'), server = lr(), path = require("path"); var paths = { templates: './templates/', sass: 'css/source/' };
71. TEMPLATES & PARTIALS
72. // Handle templates and partials gulp.task('fileinclude', function() { return gulp.src(path.join(paths.templates, '*.tpl.html')) .pipe(fileinclude()) .pipe(rename({ extname: "" })) .pipe(rename({ extname: ".html" })) .pipe(gulp.dest('./')) .pipe(livereload(server)) .pipe(notify({ message: 'Includes: included' })); });
73. COMPILE SASS
74. // Compile Sass (Libsass) gulp.task('sass', function() { return gulp.src(path.join(paths.sass, '*.scss')) .pipe(sass({ style: 'expanded', sourceComments: 'map', errLogToConsole: true})) .pipe(autoprefixer('last 2 version', "> 1%", 'ie 8', 'ie 9')) .pipe(gulp.dest('css')) .pipe(livereload(server)) .pipe(notify({ message: 'LibSass files dropped!' })); });
75. // Compile Sass (Ruby version) gulp.task('rubysass', function() { return gulp.src(path.join(paths.sass, '*.scss')) .pipe(plumber()) .pipe(rubysass({ sourcemap: true, style: 'expanded'})) .pipe(autoprefixer('last 2 version', "> 1%", 'ie 8', 'ie 9')) .pipe(gulp.dest('css')) .pipe(livereload(server)) .pipe(notify({ message: 'Ruby Sass files dropped!' })); });
76. LOCAL SERVER
77. // Create server gulp.task('connect', connect.server({ port: 5678, root: [__dirname], livereload: false })); function createWatcher(task) { // Listen on port 35729 server.listen(35729, function (err) { if (err) { return console.error(err) }; //Watch task for sass gulp.watch(path.join(paths.sass, '**/*.scss'), [task]); // watch task for gulp-includes gulp.watch(path.join(paths.templates, '**/*.html'), ['fileinclude']); }); }
78. WATCHERS
79. // Watch for libsass changes gulp.task('watch', function() { createWatcher('sass'); });
80. // Watch for Ruby Sass changes gulp.task('rubywatch', function() { createWatcher('rubysass'); });
81. RUNNING GULP COMMANDS
82. // Default gulp command gulp.task('default', ['fileinclude', 'sass', 'connect', 'watch'], function() {});
83. $ gulp
84. // Ruby gulp command gulp.task('useruby', ['fileinclude', 'rubysass', 'connect', 'rubywatch'], function() { });
85. $ gulp useruby
86. MOST EXCELLENT PLUGINS
87. gulp-concat
88. var concat = require('gulp-concat'); gulp.task('concatinate', function() { return gulp.src('assets/javscript/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('build/all.js')) });
89. gulp-uglify
90. var uglify = require('gulp-uglify'); gulp.task('minify', function() { return gulp.src('assets/javscript/*.js') .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('build/all.js')) });
91. gulp-clean
92. var gulp = require('gulp'); var clean = require('gulp-clean'); gulp.task('clean', function () { return gulp.src('build', {read: false}) .pipe(clean()); });
93. gulp-plumber
94. var gulpError = function (errorMessage) { gutil.beep(); console.log(errorMessage); }; gulp.task('compass-sass', function () { gulp.src('source/scss/style.scss') .pipe(plumber({ errorHandler: gulpError })) .pipe(rubysass()) .pipe(gulp.dest('build/assets')); });
95. gulp-rename
96. var rename = require('gulp-rename'); gulp.task('vendor', function() { return gulp.src('source/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('build')) .pipe(uglify()) .pipe(rename('all.min.js')) .pipe(gulp.dest('build')) .on('error', gutil.log) });
97. gulp-watch
98. var watch = require('gulp-watch'); gulp.task('watch-assets', function () { watch({ glob: 'scss/**/*.scss', emit: 'one', emitOnGlob: false },function(files) { return files .pipe(less({ paths: [ path.join(__dirname, 'scss', 'includes') ] })) .pipe(gulp.dest('build/css')) .on('error', gutil.log); }); });
99. gulp-load-plugins
100. var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(plugins.jshint()) });
101. gulp-livereload
102. browser-sync
104. gulp-util
105. generator-gulp-webapp
109. fin.