gulp基础

gulp用法

关于gulp

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

入门指南

安装


sudo npm install -g gulp

安装完成后，可以用gulp -v查看是否安装成功。

OK，准备工作完成了～

gulpfile.js

在根目录下创建一个名字叫gulpfile.js的文件。

文件格式为：

var gulp = require("gulp");
gulp.task('default',function(){
    ......
})
//默认名为default的任务将会被执行。

运行gulp

gulp

API

gulp.src(globs[, options]))

说明，用于指出gulp要进行处理的文件的路径，借鉴了管道（pipe）的思想。前一级的输出，直接变成后一级的输入。

globs:要处理的文件的匹配路径。可以用一些通配符。
- 'src/c.css' 具体要匹配的文件名称。
- ‘src/*.js’ 匹配所有js文件。
- 'src/**/*.js' 匹配src下边任意文件夹下的所有js文件
- '{}匹配多个属性'。'src/{a,b}.css' 匹配src文件下的a.js和b.js
- '!'排除文件，'!src/c.css'，不包括src下的c.css文件。
```
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task(default,function(){
    gulp.src('./src/*.less')
    .pipe(less())
    .pipe(gulp.dest('./css'));
})
```
第二个参数选填，有三个属性，buffer，read，base
- buffer:类型Boolean，默认true，设置成flase时候，将返回file.content流，处理大文件的时候有用。
- read：类型Boolean，默认true，设置成false的话，将不会执行文件读取操作，返回null
- base：类型String，设置输出路径以某个路径的某个组成部分为基础向后拼接。
gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。
```
gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));
```
path:路径，没有文件会自动创建新文件。

options：类型，可选，是个Object，有两个值。
1. options.cwd：类型：String 默认：process.cwd()：前脚本的工作目录的路径当文件输出路径为相对路径将会用到；
2. options.mode：类型：String 默认：0777 指定被创建文件夹的权限；
这两个值用的比较少
gulp.task(name[, deps], fn))

这个方法定义了一个gulp任务。

name:任务的名称
deps,可选项，该任务所依赖的任务，即执行外deps指定的任务之后才能完成当前定义的任务。
fn：任务相关的操作的回调函数

gulp.task('textLess',function(){
    gulp.src('./src/*.less')
    .pipe(less())
    .pipe(gulp.dest('./css))
});
gulp.task('minifyCss',[textLess],function(){
    gulp.src(./css/*.css)
    .pipe(minifyCss())
    .pipe(gulp.dest(./dist/css));
})

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

用于监听文件变化，文件发生修改就会执行指定的任务。

globs：需要处理的源文件路径
opts
tasks：执行任务的名称数组
cb：文件变化的回调函数

gulp.task('watch1',function(){
    gulp.watch('./less/*.less',[testLess])
});
//有修改的时候出发gulp任务

gulp.task('watch2',function(event){
    gulp.watch('./less/*.less',function(event){
        console.log('file has changed');
        console.log(event);
    })
})
//有修改的时候执行回调函数

常用的gulp模块

gulp-uglify 压缩js文件
gulp-clean-css 压缩css文件（替代gulp-minify-css）
imagemin 压缩图片
gulp-less 编译less
gulp-ruby-sass 编译sass，建议用less
gulp-autoprefixer 处理css前缀