Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：
搭建web服务器
文件保存时自动重载浏览器
使用预处理器如Sass、LESS
优化资源，比如压缩CSS、JavaScript、压缩图片
更多……
一. 安装Gulp
$ npm install gulp -g
npm install是指定从Node Package Manager安装的命令。
-g表示全局安装，这样你在电脑上任何位置都能只用gulp 命令。
二. 创建Gulp项目
首先，新建一个项目文件夹gulpDemo，并在该目录下执行npm init命令：
$ npm init
npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖（这里主要是插件） （先随便写package信息，填完之后终端会自动出现下面内容）
{
"name": "gulp-demo",
"version": "1.0.0",
"description": "testgulp",
"main": "index.js",
"dependencies": {
"gulp": "^3.9.1"
},
"devDependencies": {},
"scripts": {
"test": "gulp test"
},
"keywords": [
"gulp"
],
"author": "",
"license": "ISC"
}
创建完之后，我们执行下面的命令：
$ npm install gulp --save-dev
这一次，我们局部安装Gulp。使用—save-dev，将通知计算机在package.json中添加gulp依赖。
{
"name": "gulp-demo",
"version": "1.0.0",
"description": "testgulp",
"main": "index.js",
"dependencies": {
"gulp": "^3.9.1",
"minimatch": "^3.0.3"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^2.3.2"
},
"scripts": {
"test": "gulp test"
},
"keywords": [
"gulp"
],
"author": "",
"license": "ISC"
}
执行完之后，gulp将创建node_modules文件夹，里面有个gulp文件夹。
目录结构
我们使用通用的webapp目录结构：
|- app/
|- sass/
|- images/
|- js/
|- fonts/
|- index.html
|- dist/
|- gulpfile.js
|- node_modules/
|- packge.json
三. 第一个Gulp任务
首先在根目录新建一个gulpfile.js文件
var gulp = require('gulp');
这行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局环境中查找。
找到之后就会赋值给gulp变量，然后我们就可以使用它了。
简单的任务如下所示：
gulp.task('task-name', function() {
// Stuff here
});
task-name 是给你的任务起的名字，稍后在命令行中执行gulp task-name，将运行该任务。
写个HelloWorld，是这样的：
gulp.task('hello', function() {
console.log('Hello World!');
});
命令行中执行：
$ gulp hello
将会输出Hello World! 实际开发中的Gulp任务大概是这样：
gulp.task('task-name', function () {
return gulp.src('source-files') // Get source files with gulp.src
.pipe(aGulpPlugin()) // Sends it through a gulp plugin
.pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})
正如你所见，两个Gulp方法，src,dest，一进一出。
四. Gulp执行预处理
我们使用gulp-sass插件来编译Sass。 安装插件的步骤是这样的：1.安装 2.引入 3.使用
使用npm install 命令安装
$ npm install gulp-sass --save-dev
在gulpfile中引入插件，用变量保存
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
在任务中使用
gulp.task('sass', function(){
return gulp.src('source-files')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('destination'))
});
我们需要给sass任务提供源文件和输出位置。所以我们先在项目中创建app/scss文件夹，里面有个styles.scss文件。 这个文件将在gulp.src中用到。
sass处理之后，我们希望它生成css文件并产出到app/css目录下，可以这样写：
gulp.task('sass', function(){
return gulp.src('app/sass/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('dist/css'))
});
测试一下：
/* styles.scss */
.testing {
width: percentage(5/7);
}
执行gulp sass,你将看到dist/css/styles.css文件下会有下面的代码：
/* styles.css */
.testing {
width: 71.42857%;
}
styles.css是gulp自动为我们生成的。 percentage 是Sass的方法。
使用Sass就这么简单。但是通常我们不止有一个scss文件。这时候可以使用Node通配符。
五. Node中的通配符
通配符是一种匹配模式，允许你匹配到多个文件。不止是Node，很多平台都有，有点像正则表达式。
使用通配符，计算机检查文件名和路径进行匹配。
大部分时候，我们只需要用到下面4种匹配模式：
.scss：匹配当前目录任意文件，所以这里.scss匹配当前目录下所有scss文件
**/.scss：匹配当前目录及其子目录下的所有scss文件。
!not-me.scss：！号移除匹配的文件，这里将移除not-me.scss
*.+(scss|sass)：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。
那么还是上面的例子，改造一下：
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass())
.pipe(gulp.dest('app/css'))
})
自动检测并执行
我们可以使用watch命令，自动检测并执行。
监听Sass文件:
Gulp提供watch方法给我们，语法如下：
// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
将上面的例子再改下：
// Gulp watch syntax
gulp.watch('app/scss/**/*.scss', ['sass']);
通常我们监听的还不只是一个文件，把它变成一个任务：
gulp.task('watch', function(){
gulp.watch('app/sass/**/*.scss', ['sass']);
// Other watchers
})
执行gulp watch命令。 有了监听，每次修改文件，Gulp都将自动为我们执行任务。
六. 自动刷新
Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器，它还能 同时刷新多个设备 新插件？记住！安装，引入，使用。 安装：
$ npm install browser-sync --save-dev
引入：
var browserSync = require('browser-sync');
使用： 我们创建一个broswerSync任务，我们需要告知它，站点根目录在哪里。
gulp.task('browserSync', function () {
browserSync({
server: {
baseDir: 'app'
},
})
})
我们稍微修改一下之前的代码，让每次css文件更改都刷新一下浏览器：
gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
现在我们配置好Broswer Sync了，我们需要运行这两个命令。
我们可以在watch任务之前告知Gulp，先把browserSync和Sass任务执行了再说。 语法如下：
gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function () {
// ...
})
应用下来是这样：
gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
现在你执行gulp watch命令，在执行完browserSync和Sass，才会开始监听。 并且现在浏览器的显示的页面为app/index.html。你修改了styles.scss之后，浏览器将自动属性页面。 附加： 不止是scss修改的时候需要刷新浏览器吧？再改改：
gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/scss/**/*.scss', ['sass']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
到目前为止，我们做了下面三件事：
可运转的web开发服务
使用Sass预处理器
自动刷新浏览器
