gulp api

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 任务名称 不能有空格
deps stringArray 该任务依赖的任务,注意：被依赖的任务需返回它的事件流
fn function 该任务调用的插件

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)
options object 可选
tasks stringArray 需执行的任务数组
fn function 每个文件变化执行的回调函数

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