Building with Gulp

Gulp 是什么?

  • 构建系统
  • 基于 Node.js 构建
  • 使用 javascript 编写
  • 拥有众多的插件
  • 开源

安装 Gulp

全局安装

npm install -g gulp

安装到项目中

npm install --save-dev gulp

使用 Gulp

创建 Gulpfile.js

    var gulp = require('gulp'),
       uglify = require('gulp-uglify');

    gulp.task('minify', function () {
       gulp.src('js/app.js')
          .pipe(uglify())
          .pipe(gulp.dest('build'))
    });

分解为 3 个部分

  1. 定义模块

    var gulp = require('gulp'),
    uglify = require('gulp-uglify');
    
  2. 定义任务

    gulp.task('minify', function () {
    });
    
  3. 定义任务执行具体逻辑

    gulp.src('js/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'))
    

上述代码可转为流程图如下

图片描述

另一个例子

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

图片描述

gulp.src()

使用 node-glob 匹配文件路径

js/app.js

js/*.js

js/**/*.js

!js/app.js    Excludes js/app.js from the match, which is useful if you want to match all files in a directory except for a particular file

*.+(js|css)    Matches all files in the root directory ending in .js or .css

包含多个文件

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

gulp.task()

gulp.task('greet', function () {
   console.log('Hello world!');
});

gulp.task('build', ['css', 'js', 'imgs']);

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

gulp.task('default', function () {
   // Your default task
});

gulp.watch()

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

gulp.watch('templates/*.tmpl.html', function (event) {
   console.log('Event type: ' + event.type); // added, changed, or deleted
   console.log('Event path: ' + event.path); // The path of the modified file
});

var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
watcher.on('change', function (event) {
   console.log('Event type: ' + event.type); // added, changed, or deleted
   console.log('Event path: ' + event.path); // The path of the modified file
});

除了 change 还支持 error、end、ready、nomatch等事件

动态更新

LiveReload

图片描述

BrowserSync

图片描述

为何使用 Gulp

实现相同的功能

Grunt

grunt.initConfig({
 less: {
    development: {
       files: {
          "build/tmp/app.css": "assets/app.less"
       }
    }
 },
 autoprefixer: {
    options: {
       browsers: ['last 2 version', 'ie 8', 'ie 9']
    },
    multiple_files: {
       expand: true,
       flatten: true,
       src: 'build/tmp/app.css',
       dest: 'build/'
    }
 }
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');

grunt.registerTask('css', ['less', 'autoprefixer']);

Gulp

var gulp = require('gulp'),
 less = require('gulp-less'),
 autoprefix = require('gulp-autoprefixer');

gulp.task('css', function () {
 gulp.src('assets/app.less')
    .pipe(less())
    .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
    .pipe(gulp.dest('build'));
});

参考链接

tieshou wang

Read more posts by this author.

Subscribe to 王铁手的博客

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!