Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-End Workflows with Gulp

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

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

February 18, 2015
Tweet

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
  6. None
  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

  103. None
  104. gulp-util

  105. generator-gulp-webapp

  106. None
  107. None
  108. None
  109. fin.