gulp.md

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