gulp.md

   1 ---
   2 title: Gulp
   3 category: JavaScript libraries
   4 layout: 2017/sheet
   5 tags: [Archived]
   6 archived: The information on this sheet may possibly be outdated.
   7 ---
   8
   9 ### Available plugins
  10
  11  * gulp-ruby-sass
  12  * gulp-autoprefixer
  13  * gulp-minify-css
  14  * gulp-jshint
  15  * gulp-concat
  16  * gulp-uglify
  17  * gulp-imagemin
  18  * gulp-livereload (requires tiny-lr)
  19  * gulp-clean
  20  * gulp-cache
  21  * gulp-notify
  22
  23  * gulp-header (headers in files)
  24  * gulp-mocha
  25  * gulp-stylus
  26  * gulp-compass
  27  * gulp-nodemon
  28  * gulp-size (displays size)
  29
  30 ### Example
  31
  32
  33     // gulpfile.js
  34     // Load plugins
  35     var gulp = require('gulp'),
  36         sass = require('gulp-ruby-sass'),
  37         autoprefixer = require('gulp-autoprefixer'),
  38         minifycss = require('gulp-minify-css'),
  39         jshint = require('gulp-jshint'),
  40         uglify = require('gulp-uglify'),
  41         imagemin = require('gulp-imagemin'),
  42         rename = require('gulp-rename'),
  43         clean = require('gulp-clean'),
  44         concat = require('gulp-concat'),
  45         notify = require('gulp-notify'),
  46         cache = require('gulp-cache'),
  47         livereload = require('gulp-livereload'),
  48         lr = require('tiny-lr'),
  49         server = lr();
  50
  51     // Styles
  52     gulp.task('styles', function() {
  53       return gulp.src('src/styles/main.scss')
  54         .pipe(sass({ style: 'expanded', }))
  55         .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  56         .pipe(gulp.dest('dist/styles'))
  57         .pipe(rename({ suffix: '.min' }))
  58         .pipe(minifycss())
  59         .pipe(livereload(server))
  60         .pipe(gulp.dest('dist/styles'))
  61         .pipe(notify({ message: 'Styles task complete' }));
  62     });
  63
  64     // Scripts
  65     gulp.task('scripts', function() {
  66       return gulp.src('src/scripts/**/*.js')
  67         .pipe(jshint('.jshintrc'))
  68         .pipe(jshint.reporter('default'))
  69         .pipe(concat('main.js'))
  70         .pipe(gulp.dest('dist/scripts'))
  71         .pipe(rename({ suffix: '.min' }))
  72         .pipe(uglify())
  73         .pipe(livereload(server))
  74         .pipe(gulp.dest('dist/scripts'))
  75         .pipe(notify({ message: 'Scripts task complete' }));
  76     });
  77
  78     // Images
  79     gulp.task('images', function() {
  80       return gulp.src('src/images/**/*')
  81         .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
  82         .pipe(livereload(server))
  83         .pipe(gulp.dest('dist/images'))
  84         .pipe(notify({ message: 'Images task complete' }));
  85     });
  86
  87     // Clean
  88     gulp.task('clean', function() {
  89       return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
  90         .pipe(clean());
  91     });
  92
  93     // Default task
  94     gulp.task('default', ['clean'], function() {
  95         gulp.start('styles', 'scripts', 'images');
  96     });
  97
  98     // Watch
  99     gulp.task('watch', function() {
 100
 101       // Listen on port 35729
 102       server.listen(35729, function (err) {
 103         if (err) {
 104           return console.log(err)
 105         };
 106
 107         // Watch .scss files
 108         gulp.watch('src/styles/**/*.scss', ['styles']);
 109
 110         // Watch .js files
 111         gulp.watch('src/scripts/**/*.js', ['scripts']);
 112
 113         // Watch image files
 114         gulp.watch('src/images/**/*', ['images']);
 115
 116       });
 117
 118     });
 119
 120 ### References
 121
 122 https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started
 123
 124 ### Livereload
 125
 126     var lr = require('tiny-lr')();
 127
 128     function notify (lr, root) {
 129       return function (event) {
 130         var fname = require('path').relative(root, event.path);
 131         lr.changed({ body: { files: [ fname ] }});
 132       };
 133     }
 134
 135     gulp.task('livereload', function () {
 136       lr.listen(35729)
 137       gulp.watch('public/**/*', notify(lr, __dirname+'/public'));
 138     });
 139
 140     // Express
 141     app.use(require('connect-livereload')())
 142     <!-- livereload --><script>document.write('<script src="'+(location.protocol||'http:')+'//'+(location.hostname||'localhost')+':35729/livereload.js?snipver=1"><\/scr'+'ipt>')</script>