发布于 2015-12-11 05:28:43 | 320 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程，程序狗速度看过来！

GulpJS 流构建系统

从头编写HTML\CSS\Javascript是上个世纪的事情了，如今的JavaScript都是通过CoffeeScript这样的支持句法缩写的编辑器写成的。如果你希望写完JavaScript能够一个工具完成代码清理优化工作，Gulp 就是你的不二之选，GulpJS类似Ant或Maven之于Java。

---

一.gulp安装和配置

1.安装

npm install --g gulp//全局安装
npm install --save-dev gulp//在项目中安装，node_modules
npm install --save-dev gulp-uglify//安装gulp 插件

2.创建gulpfile.js（注意：文件名必须是gulpfile，否则命令行下的gulp指令如何知道执行哪一个js文件呢？）

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

3.命令行执行gulp文件，$gulp

二.gulp 原理

• gulp原理解析：数据流

三.gulp api

最简单的gulpfile.js

// 导入 gulp/gulp-sass/gulp-autoprefixer 三个模块
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

// 使用 gulp.task() 方法注册一个任务
// 第一个参数是任务名称
// 第二个参数是任务的执行逻辑
gulp.task('styles', function() {
    return gulp.src('sass/demo.scss')
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest('css'));
});

glup的5大函数

• gulp.task(name, fn)，注册一个 gulp 任务

• gulp.run(...tasks)，并行运行多个 gulp 任务

• gulp.watch(glob, fn)，实时监控内容，当 glob 内容变化时，执行 fn

• gulp.src(glob)，glob 是目标文件的路径，返回一个可读的 stream

• gulp.dest(gloc)，glob 是输出路径，返回一个可写的 stream

api
gulp.src('index.js');
gulp.src(['js/**/*.js', '!js/**/*.min.js']);//数组，制定多个文件

• dest():dest方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被新建

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

/*
*@param taskname 任务名称
*@param [] 任务依赖前置，必须执行完这个数组的任务，才可以执行任务
*@param fn 任务逻辑
*/
gulp.task('taskname', [ taskDep1, taskDep2 ],fn):
命令行 gulp taskname，即可执行gulp任务
注意：gulp.task('default'，fn)，是默认执行任务，在命令行启动gulp，默认执行动作


/*
*@param 检测文件路径
*@param 检测到文件变化，执行任务
*/
gulp.watch('文件路径', [task]):
gulp.task('watch', function() {
    gulp.watch('sass/demo.scss', ['styles']);
});