本文章基于本周三分享内容进行整理所作。

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.jsjs/*.jsjs/**/*.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'));});

参考链接