Gulp自动化工具使用详情

gulp

gulp中API非常少，只有4个：

（1）gulp.src() 读取一个文件，返回一个文件流。接下来可多次调用用pipe()进行链式操作
读取的文件名匹配格式如下：

js/app.js：指定确切的文件名
js/*.js：某个目录所有后缀名为js的文件
js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件
!js/app.js：除了js/app.js以外的所有文件
*.+(js|css)：匹配项目根目录下，所有后缀名为js或css的文件
src方法的参数还可以是一个数组，用来指定多个成员：
gulp.src(['js/**/*.js', '!js/**/*.min.js']);  

（2）gulp.dest() 将管道中的文件流生成文件
（3）gulp.task() 定义任务
（4）gulp.watch() 监控文件变换，执行任务

---

gulp常用插件

• less的编译 gulp-less
• 加载css前缀 gulp-autoprefixer
• 文件合并 gulp-concat
• css文件压缩 gulp-minify-css
• js文件压缩 gulp-uglify
• js代码检查 gulp-jshint
• html文件压缩 gulp-minify-html
• 图片压缩 gulp-imagemin
• 文件重命名 gulp-rename
• 一次性加载插件 gulp-load-plugins
• 自动刷新插件 gulp-livereload

压缩css文件：

var gulp = require('gulp'),
    minifyCss = require('gulp-minify-css');

gulp.task('miniCss', function() {
    gulp.src('css/*')//路径
        .pipe(minifyCss())
        .pipe(gulp.dest('./css'));
});
gulp.task('default', ['miniCss']);//必写default

修改后缀名：

var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('miniCss', function() {
    gulp.src('./css/*css')
        .pipe(minifyCss())
        .pipe(rename({
            suffix: "-min"       //后缀名      
          }))
        .pipe(gulp.dest('./min_css'));
});
gulp.task('default', ['miniCss']);

gulp.watch()

监听文件的改动

var gulp = require('gulp'),
    minifyCss = require('gulp-minify-css');

gulp.task('miniCss', function() {
    gulp.src('css/*css')
        .pipe(minifyCss())
        .pipe(gulp.dest('./min'));
});
gulp.task('watch', function () {
  console.log('继续压死你!');
  gulp.watch('css/*', ['miniCss']);
});
gulp.task('default', ['watch','miniCss']);
... prompt'''

gulp.watch监听多个文件

多个文件需要监听

gulp.task('watch', function () {
  gulp.watch('./css/*', ['miniCss']);
  gulp.watch('./js/*', ['uglify']);
});