gulp.js - 基于流的自动化构建工具

Gulp是什么

gulp.js 是一种基于流的，代码优于配置的新一代构建工具。

Gulp是一个自动化构建系统，它可以帮助你完成一些常见的自动化任务，比如: 代码的合并压缩，语法的检查等，从而提高你的开发速率，让你的工作更有效率。

Gulp使用

1. 在你的项目下把 gulp 安装为开发依赖组件（假设你已经创建好了 package.json）

            				npm install gulp --save-dev
            			

2. 在项目的根路径下创建 Gulpfile.js

                        
var gulp = require('gulp'),
   uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

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

Gulp项目结构

        |-- app
	|  |-- vendors (bower_components)
	|  |-- styles
	|  |  |-- style_one.scss
	|  |  |-- style_two.scss
	|  |-- scripts
	|  |  |-- script_one.coffee
	|  |  |-- script_two.coffee
	|  |-- images
	|  |  |-- background.png
	|  |-- index.html
	|-- dist
	|  |-- styles
	|  |  |-- main.min.css
	|  |-- scripts
	|  |  |-- scripts.min.js
	|  |-- images
	|  |-- index.html
	|-- node_modules
	|-- test
                    

gulp.js 的 API

• gulp.task(name[, deps], fn) - 注册任务 ，name 是任务名称；deps 是可选的数组，其中列出需要在本任务运行要执行的任务；fn 是任务体
• gulp.src(globs[, options])：指明源文件路径
• gulp.dest(path)：指明任务处理后的目标输出路径
• gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])：监视文件的变化并运行相应的任务
• gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

gulp 插件

• 语法检查 （gulp-jshint）
• 合并文件 （gulp-concat）
• 压缩代码 （gulp-uglify）
• 文件重命名 （gulp-rename）
• 添加-webkit-，-moz-，-ms-前缀 （gulp-autoprefixer）
• 压缩css （gulp-minify-css）
• 删除文件或文件夹 （gulp-clean）
• 自动载入所有的gulp模块 （gulp-load-plugins）