gulp api

简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成

gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

安装

npm install -g gulp-cli //安装gulp命令行工具npm install --save-dev gulp //安装gulp到项目

gulpfile.js

var gulp = require('gulp');gulp.task('default', function(){    //codes..});

执行gulp

gulp //执行 default任务gulp connect less //执行多个任务

gulp.src(glob , [options])

gulp.src() 返回当前文件流至可用的插件

• glob string / stringArray 匹配源文件的模式字符串

  通配符路径示例:
  "src/a.js" //具体的文件
  "src/*" //src下的所有文件
  "src/**/*.js" //src下所有层级的子文件夹中的js
  "{}" //匹配多个属性 src/{a,b}.js (匹配src/a.js, src/b.js), src/*.{png,jpg,gif} (匹配src文件夹下的图片)
  !src/a.js //排除src/a.js文件

  var gulp = require('gulp');  var less = require('gulp-less');  gulp.task('testless', function(){      //gulp.src('less/test/style.less')      gulp.src(['less/**/*.less', '!less/{extend,page}/*.less'])          .pipe(less())          .pipe(gulp.dest('./css'));

• options object 可选

  options =>  {    buffer: true, //是否缓冲文件流，处理大文件时有用    read: true, //是否执行文件读取操作    base: 'some/path' //输出路径的基础路径  }  gulp.src('client/js/**/*.js')      .pipe(minify())      .pipe(gulp.dest('build')); //writes 'build/somdir/somefile.js'  gulp.src('client/js/**/*.js', {base:'client'})      .pipe(minify())      .pipe(gulp.dest('build'));//writes 'build/js/somedir/somefile.js'

gulp.dest(path, [options])

gulp.dest() 指定处理完成后文件的输出路径

gulp.src('./client/templates/*.jade')    .pipe(jade())    .pipe(gulp.dest('./build/tempaltes')    .pipe(minify())    .pipe(gulp.dest('./build/minify_templates');

• path string or function 指定文件的输出路径

• options 可选

  options=>{      cwd: process.cwd(), //文件的输出路径若为相对路径，则相对cwd      mode: '0777' //被创建文件的权限  }

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

name string 任务名称 不能有空格

gulp.task('testless', function(){    return gulp.src(['less/style.less'])                .pipe(less())                .pipe(gulp.dest('./css');    });        gulp.task('minicss', ['testless'], function(){    //执行完testless任务后 再执行minicss任务    gulp.src(['css/*.css'])        .pipe(minifyCss())        .pipe(gulp.dest('./dist/css'));

gulp.watch(glob, [options], tasks) ,gulp.watch(glob, [options], [fn])

gulp.watch() 监听文件变化并执行指定任务

glob string or stringArray 同 gulp.src(glob)

gulp.task('watch1', function(){    gulp.watch('less/**/*.less', ['testless']);});gulp.task('watch2', function(){    gulp.watch('js/**/*.js', function(file){        console.log('file ' + file.path + ' was ' + file.type + ', running tasks..');    });});