认识gulp

Gulp

Gulp是基于node.js流的前端自动化构建工具，类似与grunt工具
官方网站地址：中文、英文、github地址

官方指出

易于使用：通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
构建快速：利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
插件高质：Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习：通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

Gulp的使用

目标：编译less文件到css并压缩
确保已经安装了node.js

1、全局安装gulp

1	npm install --global gulp

2、新建package.json文件,根据命令引导执行

npm init

3、作为项目的开发依赖（devDependencies）安装

1	npm install gulp --save-dev

4、项目引用模块安装,执行下面命令：

//方式一
npm install gulp-less gulp-minify-css gulp-rename  --save-dev

//方式二
npm install gulp-less --save-dev       //安装gulp-less
npm install gulp-minify-css --save-dev //安装gulp-minify-css
npm install gulp-rename --save-dev     //安装gulp-minify-css

5、在项目根目录下创建一个名为 gulpfile.js 的文件,写入代码：

//引入模块
var gulp = require('gulp'),
    less = require('gulp-less'),
    minifycss = require('gulp-minify-css'),
    rename = require('gulp-rename');

//建立任务
gulp.task('testcStyle',function () { //任务名
    gulp.src('src/less/*.less') //匹配 任务文件
        .pipe(less()) //编译less
        .pipe(rename({ suffix: '.min' })) //重命名
        .pipe(minifycss())// 压缩
        .pipe(gulp.dest('dist/css')); //将会在src/css下生成index.min.css
});

//监控任务
gulp.task('autoWatchTask',function(){
    var watcher = gulp.watch('src/less/index.less', ['testStyle']);
    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
    });
});

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

6、执行命令gulp,完了

Gulp API了解

gulp拥有的方法有gulp.task()、gulp.src()、gulp.dest()、gulp.watch()，除gulp.run()现在已被淘汰

gulp.src(globs[, options])

获取匹配的虚拟文件对象流(Vinyl files stream)

globs：类型(String或Array)
匹配模式，可以匹配文件路径或文件名，多个匹配可为数组

options: 类型(Object),可选
options.buffer:类型(Boolean 默认值为true),
options.read:类型(Boolean 默认值true)
options.base:类型(String)

example:gulp.src(['js/*.js','css/*.css'])

gulp.dest(path[, options])

文件被写入的路径,文件夹不存在，将会自动创建它

path: 类型(String或Function)
设置写入文件的路径

options：类型(Object),可选
options.cwd：类型(String)、默认值(process.cwd())
options.mode：类型(String)、默认值 (0777), 八进制权限字符

gulp.task(name[, deps], fn)

定义任务
name: 类型(String),任务名称
deps：类型(Array),任务列表的数组,在当前任务运行之前完成，可选
fn：任务所要执行的一些操作，可选

example：
gulp.task('testTask', ['less', 'js', 'html'],function(callback) {
    //接受一个 callback
});

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监控文件的变化，当文件一发生变化，就立即执行指定的任务

glob：类型(String或Array)
匹配模式，可以匹配文件路径或文件名，多个匹配可为数组

opts：类型 (Object),可选
tasks：类型 (Array),文件变化后，要执行的任务
cb(event)：类型(Function),每次变化后需要执行的 callback, event.type-类型(String)、event.path-类型(String)

example:
gulp.watch('js/*.js', function(event){
    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
    console.log(event.path); //变化的文件的路径
});

通配符

* 匹配0或多个字符在一个单一的路径部分
** 匹配路径中的0个或多个目录及其子目录,需要单独出现
{} 匹配多个属性
! 排除文件
? 匹配1个字符
[…] 匹配方括号中出现的任意字符中的一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个
!(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配
?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次
+(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次
*(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次

gulp插件

gulp插件黑名单

less编译(gulp-less)
css压缩(gulp-minify-css)
js压缩、美化(gulp-uglify)
js错误和潜在问题检查(gulp-jshint)
图片压缩(gulp-imagemin)
合并js(gulp-concat)
压缩html(gulp-htmlmin),可压页面js、css、去除页面空格、注释
css增加前缀(gulp-autoprefixer), 根据设置浏览器版本自动处理浏览器前缀
重命名(gulp-rename)
sass编译(gulp-sass)
自动刷新(gulp-livereload)
清理路径下文件(del)
优化html内的script和stylesheets(gulp-useref)
除错工具将直接显示原始代码(gulp-sourcemaps)
对文件名加MD5后缀(gulp-rev)
路径替换(gulp-rev-collector)
更改提醒(gulp-notify)
只有改变了的图片才会压缩((gulp-cache)
js格式化(gulp-jsfmt)
生成雪碧图(gulp-sprite-generator)
js质量检查(gulp-jslint)
handlebars模版(gulp-handlebars)
字符串替换(gulp-replace)
任务执行顺序(gulp-run-sequence)
途中添加文件夹(gulp-add-src)
动态html/替换变量(gulp-template)
include文件(gulp-file-include)
条件切换(gulp-if)
自定义辅助工具(gulp-util)
恢复路径(gulp-revert-path)
有变化的才操作，没变化的就跳过，可进一步优化效率(gulp-changed)
任务发生错误不中断继续执行(gulp-plumber)
打包压缩(gulp-zip)
requirejs合并(gulp-requirejs-optimize)