Before we begin…

git clone https://github.com/drewminns/sixrevisions_gulpstarter.git

Installing Gulp on your computer

npm install gulp -g

If you’re having trouble: Use superuser privileges

sudo npm install gulp -g

An explanation of the command

• npm is the command to work within the scope of npm.
• install is the action to perform within the the scope of npm.
• gulp is the name of the package we want to install.
• -g is a command option/flag that stands for global. With this command option, we’re saying we want Gulp to be available to our entire system.

Changing to the project directory

cd /your/project/directory

Using Gulp for a project

Creating a package.json file

npm init

What is package.json?

Creating a gulpfile

touch gulpfile.js

Installing Gulp plugins

npm install gulp --save-dev

npm install gulp-sass gulp-concat --save-dev

node_modules directory

Setting up a Gulp task

Specifying the project’s dependencies

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat');

Using the project’s dependencies

gulp.task('styles', function() {
  return gulp.src('styles/*.scss')
    .pipe(sass({
      'sourcemap=none': true
    }))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('styles/'))
});

Whoa. What?

gulp.task('name-of-the-task', function() {
    // The guts go here
});

gulp.task('styles', function() {
    return gulp.src('styles/*.scss')
});

gulp.task('styles', function() {
    return gulp.src('styles/*.scss')
        .pipe(sass({
            'sourcemap=none': true
        }))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('styles/'));
});

1. Get and specify the files we want to process. For this, we use the .src()method to get and point to the .scss files inside the styles directory.
2. Compile Sass files to CSS. Remember that we instantiated the sass() function earlier, which refers to the gulp-sass plugin.
3. Combine all CSS style rules into one stylesheet. The gulp-concat plugin creates a stylesheet named style.css containing all of our CSS.
4. Write the stylesheet in the styles directory. The style.css file will be placed in the styles directory. This is done with the .dest() method.

Running a task

gulp styles

Watching changes to your source files

gulp.task('watch', function() {
    // The guts goes here
});

1. Use Gulp’s .watch() method to monitor any changes to any of our .scss files.
2. Whenever Gulp detects a change, our styles task will be executed.

gulp.task('watch', function() {
    gulp.watch('styles/*.scss', ['styles']);
});

Creating new tasks

npm install gulp-jshint --save-dev

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint');

gulp.task('jshint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
});

gulp jshint

gulp.task('watch', function() {
  gulp.watch('styles/*.scss', ['styles']);
  gulp.watch('js/*.js', ['jshint']);
});

Adding processes to existing tasks

npm install jshint-stylish --save-dev

gulp.task('jshint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
});

gulp jshint

$ gulp jshint
[10:29:57] Starting 'jshint'...
\js\main.js
  line 2  col 7  Use '===' to compare with '0'.
  ‼  1 warning
[10:29:57] Finished 'jshint' after 93 ms

Auto-prefix CSS properties

npm install gulp-autoprefixer --save-dev

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
  return gulp.src('styles/*.scss')
    .pipe(sass({
      'sourcemap=none': true
  }))
    .pipe(concat('style.css'))
    .pipe(autoprefixer())
    .pipe(gulp.dest('styles/'));
});

gulp.task('styles', function() {
  return gulp.src('styles/*.scss')
    .pipe(sass({
      'sourcemap=none': true
    }))
    .pipe(concat('style.css'))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('styles/'));
});

Putting it all together

• styles – deals with processes related to our CSS
• jshint – checks our JavaScript files
• watch – automatically runs the styles and watch tasks whenever Gulp detects changes in our source files.

gulp.task('default', []);

gulp.task('default', ['styles', 'jshint', 'watch']);

1. Compile our Sass to CSS
2. Combine all our CSS into one file called styles.css
3. Add vendor-prefixes to the appropriate CSS properties
4. check our .js files for errors
5. Watch our source files for changes and rerun our tasks automatically

// Dependencies
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    autoprefixer = require('gulp-autoprefixer');
// Task: styles
gulp.task('styles', function() {
  return gulp.src('styles/*.scss')
    .pipe(sass({
      'sourcemap=none': true
    }))
    .pipe(concat('style.css'))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('styles/'))
});
// Task: watch
gulp.task('watch', function() {
   gulp.watch('styles/*.scss', ['styles']);
});
// Task: jshint
gulp.task('jshint', function() {
  return gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});
// Default task
gulp.task('default', ['styles', 'jshint', 'watch']);

Moving forward

Similarities between Grunt and Gulp

• code minification
• code-quality analysis
• image optimization
• vendor-prefixing
• unit-testing
• … and much more

1. which files you want it to process
2. what you want it to do with the files (minify them, analyze them for errors, etc.)
3. where you want it to place the processed files

• Speed Up Your Web Development Workflow with Grunt
• How to Use Gulp

• They’re task runners that can automate portions of our development workflow
• We write the tasks we want them to run using JavaScript
• They both need Node and npm in order to work

Differences between Grunt and Gulp

• The way you configure your tasks. Grunt is configuration-based. Gulp is stream-based.
• The way they run your tasks. Grunt runs the processes you want to execute in a sequential manner. Gulp tries to run them with maximum concurrency, meaning it will try to execute processes in parallel if possible.

Task Configuration

1. Combine all CSS files found inside the src directory into one big stylesheet
2. Minify the stylesheet
3. Placed the minified file into the css directory with the name ofstyles.min.css
4. Report the task-execution time in the command line after the task has completed

Grunt Task Configuration

module.exports = function(grunt) {
  // Report the task-execution time in the command line
  require('time-grunt')(grunt);
  // Task configuration
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // Combine all CSS files found inside the src directory
    concat_css: {
      dist: {
        src: ['src/*.css'],
        dest: 'css/styles.css'
      }
    },
    // Minify the stylesheet
    cssmin: {
      target: {
        // Write the minified file in the css directory
        files: [{
          'css/styles.min.css': ['css/styles.css']
        }]
      }
    }
  });
  // Load the plugins
  grunt.loadNpmTasks('grunt-concat-css');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // Use `grunt` command to run the task
  grunt.registerTask('default', ['concat_css', 'cssmin']);
}

Gulp Task Configuration

// Load the plugins
var gulp = require('gulp');
var concatenate = require('gulp-concat-css');
var minify = require('gulp-cssmin');
var duration = require('gulp-duration');
// Task configuration
gulp.task('default', function() {
  gulp.src('src/*.css')
  // Combine all CSS files found inside the src directory
  .pipe(concatenate('styles.min.css'))
  // Minify the stylesheet
  .pipe(minify())
  // Report the task-execution time in the command line
  .pipe(duration('Execution Time: '))
  // Write the minified file in the css directory
  .pipe(gulp.dest('css/'));
});
// Use `gulp` command to run the task

Task Configuration Difference

The magic happens because of the object format that plugins exchange, the so called Vinyl. Vinyl is just an abstraction that describes a virtual file object—one that could refer to an existing file on the FS, a stream, or simply dead-ends with a null.

— Preslav Rachev

Gulp vs Grunt. Why one? Why the Other?

Task Execution

How Grunt Executes a Task

1. Open the processed file from the last process
2. Run the current process
3. Save the changes
4. Close the current processed file so that the next process can access it

How Gulp Executes a Task

Measuring Task-Execution Speed

Source: tech.tmw.co.uk

Grunt vs Gulp Stats

Project Start Date

Usage

Grunt Usage Stats

Gulp Usage Stats

Amount of Plugins

Development Activity

Grunt Development Activity Stats

Gulp Development Activity Stats

Popularity

Grunt Popularity Stats

Gulp Popularity Stats

Data Sources

• npm-stat: grunt
• npm-stat: gulp
• Plugins – Grunt: The JavaScript Task Runner
• gulp.js plugin registry
• github.com/gruntjs/grunt
• github.com/gulpjs/gulp

Conclusion