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. 2.

    A BUILD SYSTEM. A TASK RUNNER. A WORKFLOW AUTOMATOR. Automate

    your mundane and repetitive tasks like preprocessing, minifying, concatenating, and optimizing files.
  2. 6.
  3. 18.

    var gulp = require('gulp'); gulp.task('task-name', function() { . . .

    }); gulp.task('default', ['task-name', 'task-name']);
  4. 41.
  5. 45.
  6. 47.
  7. 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); });
  8. 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')); });
  9. 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')) });
  10. 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/')) });
  11. 67.
  12. 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/' };
  13. 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' })); });
  14. 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!' })); });
  15. 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!' })); });
  16. 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']); }); }
  17. 78.
  18. 83.
  19. 92.

    var gulp = require('gulp'); var clean = require('gulp-clean'); gulp.task('clean', function

    () { return gulp.src('build', {read: false}) .pipe(clean()); });
  20. 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')); });
  21. 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) });
  22. 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); }); });
  23. 100.

    var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins();

    gulp.task('js', function () { return gulp.src('js/*.js') .pipe(plugins.jshint()) });
  24. 103.
  25. 104.
  26. 106.
  27. 107.
  28. 108.
  29. 109.