Gulp

setup

1. install Node.js

2.

$ npm install gulp -g

4. create a gulpfile.js at the root of project

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

3.

$ npm install --save-dev gulp

Gulp Method

  • gulp.task
    定義工作內容
  • gulp.watch
    關注指定檔案是否異動
  • gulp.src
    指定檔案來源
  • gulp.dest
    指定檔案存放位置

task('default', [A, B, ...])

src(files)

watch( 'files', task.A )

pipe(...)

dest(files)

task.A

task.B

pipe(...)

pipe(...)

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('default', function() {
  return gulp.src('img/*')
    .pipe(imagemin())
    .pipe(gulp.dest('min-img'));
});

gulpfile.js

gulp-imagemin

$ npm install --save-dev gulp-imagemin
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed');

gulp.task('default', function() {
  return gulp.src('img/*')
    .pipe(changed('min-img'))
    .pipe(imagemin())
    .pipe(gulp.dest('min-img'));
});

gulpfile.js

gulp-changed

$ npm install --save-dev gulp-changed
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed');

gulp.task('img-min', function() {
  return gulp.src('img/*')
    .pipe(changed('min-img'))
    .pipe(imagemin())
    .pipe(gulp.dest('min-img'));
});

gulp.task('watch', function(){
    gulp.watch('img/*',['img-min']);
});

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

gulp.watch

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed');
var sass = require('gulp-sass');

gulp.task('img-min', function() { /* ... */ });

gulp.task('sass', function() {
  return gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function(){
    gulp.watch('img/*', ['img-min']);
    gulp.watch('sass/*.sass', ['sass']);
});

gulp.task('default', ['watch', 'img-min', 'sass'] );

gulp-sass

$ npm install --save-dev gulp-sass
$myColor: #FF3456;
$myMargin: 16px;

.myclass 
{
    background-color: $myColor;
    margin: $myMargin;

    div
    {
        background-color: darken($myColor, 50%);
        margin: $myMargin / 2;
    }
}

demo.sass

var gulp = require('gulp');
/* ... */
var ts = require('gulp-typescript');

gulp.task('img-min', function() { /* ... */ });
gulp.task('sass', function() { /* ... */ });

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

gulp.task('watch', function(){
    gulp.watch('img/*', ['img-min']);
    gulp.watch('sass/*.sass', ['sass']);
    gulp.watch('ts/*.ts', ['ts']);
});

gulp.task('default', ['watch', 'img-min', 'sass', 'ts'] );

gulp-typescript

$ npm install --save-dev gulp-typescript
// TypeScript Array
var list:Array<string> = ["A", "B", "C"];

// ES5 Array.map()
// ES6 Arrow Function
var myLength = list.map( s => s.length );

console.log( myLength ); // 3

demo.ts

var gulp = require('gulp');
/* ... */
var mainBowerFiles = require('main-bower-files');

gulp.task('bower-main-file', function(){
    return gulp.src(mainBowerFiles())
    	.pipe(gulp.dest("./lib"));
});

gulp.task('default', [ 'bower-main-file'] );

main-bower-files

$ npm install --save-dev main-bower-files
var gulp = require('gulp');

gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(express.static(__dirname));
  app.listen(4000);
});

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

Live Reload(1/3)

$ npm install --save-dev express

  • Express

var gulp = require('gulp');

gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')({port: 4002}));
  app.use(express.static(__dirname));
  app.listen(4000);
});

Live Reload(2/3)

npm install tiny-lr connect-livereload --save-dev

  • tiny-lr

  • connect-liverelad

var tinylr;

gulp.task('livereload', function() {
  tinylr = require('tiny-lr')();
  tinylr.listen(4002);
});

gulp.task('watch', function() {
  gulp.watch('*.html', function(event){

      var fileName = require('path').relative(__dirname, event.path);

      tinylr.changed({
        body: {
          files: [fileName]
        }
      });
  });
});

gulp.task('default', ['express', 'livereload', 'watch']);

Live Reload(3/3)

gulp-plugins

  • gulp-connect
    開啟server
  • gulp-concat
    合併程式
  • gulp-clean
    清除檔案
  • gulp-rename
    重新命名檔案
  • gulp-minify-css
    壓縮CSS
  • gulp-jshint
    JS Debug
  • gulp-uglify
    壓縮 JS

preprocessor

  • gulp-compass
     
  • gulp-less
     
  • gulp-jade
     
  • gulp-coffee
     
  • gulp-livescript
Made with Slides.com