Fork me on GitHub

  1. Gulp

    Rome Wasn't Built With Gulp

    Adam Lynch

  4. Hammer

  5. Grunt

  6. module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js']
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

  7. Gulp

  8. var gulp = require('gulp');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var mocha = require('gulp-mocha');

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

gulp.task('scripts', function() {
  gulp.src('./src/scripts/*.js')
    .pipe(jshint()))
    .pipe(jshint.reporter('default'))
    .pipe(concat('script.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts/'));
});

gulp.task('test', function(){
  gulp.src('./src/tests/*.js')
    .pipe(mocha());
});

gulp.task('watch', ['scripts'], function(){
  gulp.watch('./src/scripts/*.js', ['scripts']);
  gulp.watch('./src/tests/*.js', ['test']);
});

  9. Gulp = Streaming build system

  10. gulp.task(name, doSomething);

    gulp.src(globs);

    gulp.dest(path);

    gulp.watch(globs, tasks);

  11. Plugins

    • gulp-autoprefixer
    • gulp-autowatch
    • gulp-beautify
    • gulp-bless
    • gulp-bower-files
    • gulp-browserify
    • gulp-buster
    • gulp-cached
    • gulp-changed
    • gulp-chmod
    • gulp-chug
    • gulp-clean
    • gulp-clipboard
    • gulp-coffee
    • gulp-coffeelint
    • gulp-coffeelint-threshold
    • gulp-concat
    • gulp-coverage
    • gulp-debug
    • gulp-exec
    • gulp-filesize
    • gulp-filter
    • gulp-front-matter
    • gulp-ftp
    • gulp-gh-pages
    • gulp-gitmodified
    • gulp-grunt
    • gulp-haml
    • gulp-handlebars
    • gulp-iced
    • gulp-iconfont
    • gulp-ignore
    • gulp-insert
    • gulp-imagemin
    • gulp-jade
    • gulp-jshint
    • gulp-less
    • gulp-livereload
    • gulp-load-plugins
    • gulp-markdown
    • gulp-minify-css
    • gulp-mocha
    • gulp-mustache
    • gulp-myth
    • gulp-newer
    • gulp-ngmin
    • gulp-open
    • gulp-order
    • gulp-plato
    • gulp-plumber
    • gulp-react
    • gulp-rss
    • gulp-ssg
    • gulp-strip-debug
    • gulp-svg-sprites
    • gulp-svgmin
    • gulp-task-listing
    • gulp-tsc
    • gulp-uglify
    • gulp-uncss
    • gulp-unzip
    • gulp-useref
    • gulp-w3cjs
    • gulp-webp
    • gulp-zip

  13. gulp-load-plugins

    var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.src('./*.coffee')
    .pipe(coffee())
    .pipe(concat('script.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./output))

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

gulp.src('./*.coffee')
    .pipe(plugins.coffee())
    .pipe(plugins.concat('script.js'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest('./output))

  14. gulp-autoprefixer

    gulp.src('./src/styles/*.css')
    .pipe(autoprefixer('last 2 versions', '> 5%'))
    .pipe(gulp.dest('./output/styles'))

  15. gulp-filter

    var excludeLibsFilter = filter('!./src/libs/*');

gulp.src('./src/*.js')
    .pipe(excludeLibsFilter)
    .pipe(uglify())
    .pipe(excluseLibsFilter.restore())
    .pipe(concat('script.js'))
    .pipe(gulp.dest('./output'))

  16. gulp-bower-files

    gulpBowerFiles()
    .pipe(concat('third-party.js'))
    .pipe(gulp.dest('./output'))

  17. gulp-coffeelint

    gulp.src('./*.coffee')
    .pipe(coffeelint())
    .pipe(coffeelint('error'))
    .pipe(coffee())
    .pipe(gulp.dest('./output'))

    See gulp-coffeelint-threshold and editorconfig.org

  18. gulp-plato

    gulp.src('./*.js')
    .pipe(plato('report'))

  19. Acceptance

    • browser-sync
    • lazypipe
    • cult
    • sequencify
    • slush
    • through
    • through2

  21. browser-sync

    var gulp = require('gulp');
var browserSync = require('browser-sync');
var less = require('gulp-less');

gulp.task('browser-sync', function() {
    browserSync.init("./css/*.css");
});

gulp.task('less', function () {
    gulp.src('less/index.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

gulp.task('default', ['less', 'browser-sync'], function () {
    gulp.watch("styles/*.less", ['less']);
});

  22. Future Friendly

  23. gulp-ked

    hereLa 'feen.ked' like

remember €x = 20 like
eh( €x into 20 is not 5 ){
    saysI 'Alright boy, calm down will ya' like
    stopTheLights() like
}

    gulp.src('app.ked')
    .pipe(ked())
    .pipe(gulp.dest('./pana'));

    github.com/adam-lynch/ked

  24. Thanks