首先，我们需要了解Gulp能做些什么？
- 编译 sass sass是什么？（使CSS可以用编程的方式写，加快我们开发的速度）
- 合并优化压缩 css
- 校验压缩 js
- 优化图片
- 添加文件指纹（md5） （我百度的，我不知道这个是什么鬼，有兴趣的可以自行百度）
- 组件化头部底部（include html）
- 实时自动刷新…
总之Gulp就是帮助前端开发中对代码自动化的构建，可以对开发中许多重复的操作进行自动化，使我们可以更加专注于代码，提高工作效率，还可以对资源进行优化（简直强到爆炸）。
首先，我们需要下载node.js
下载链接： https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi (直接安装就好，安装地址不要出现中文！！！不要出现中文！！！）我就不说三遍！！！
然后打开CMD命令窗口输入
node -v
由于国内到NPM服务器的不稳定，所以我们一般采用淘宝镜像的方式去下载。
更换NPM为淘宝源
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
好了，我们进入正题，安装Gulp！！！！
1.首先我需要安装全局环境下的Gulp
由于我们安装了淘宝镜像，可以快速的下载Gulp
cnpm install gulp -g
嗯。。。静静的等待下载完毕。
安装完毕后，输入下面命令检查是否安装成功，和版本号
gulp -v
2.目录结构：
└── src/ 源码目录
├── build/ .html 组件
├── sass/ .scss .sass 文件
├── css/ .css 文件
├── js/ .js 文件
└── img/ 图片
└── dist/ 输出目录
└── package.json
└── gulpfile.js
！！！package.json是用来干嘛的？
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
如果想更深入了解的话可以去看看：http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc0
如果是别人已经开发中的项目，想同步下载所有插件只需要用下面这行代码就可以解决！！
cnpm install
就可以自动安装所有声明的插件模块
！！！gulpfile.js是干嘛的呢？（这个需要自己手动创建在根目录下！！！！这个需要自己手动创建在根目录下！！！！这个需要自己手动创建在根目录下！！！！）
用来管理文件输出的位置和用什么工具进行压缩或者优化（个人理解）
接下来我们需要给安装项目目录安装Gulp：
npm install gulp --save-dev
—save-dev 这个参数会将插件信息自动更新到 package.json 里，其中的 devDependencies 属性会随插件依赖的安装卸载而改变。
这个操作会在项目目录下自动生成node_modules 文件夹，相应的插件都在其中。
兄弟，买挂吗？这里有，让你敲代码比复制粘贴还快：http://www.gulpjs.com.cn/docs/api/（API文档）
当然，吹牛的反正不要钱~
好了接下来就是具体的写法和实例：
1 /*! 2 * gulp 3 * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev 4 */ 5 //如果引入不成功的话，可以：插件名 -v 查询下是否安装成功 6 // Load plugins 7 var gulp = require('gulp'), // 必须先引入gulp插件 8 del = require('del'), // 文件删除 9 sass = require('gulp-ruby-sass'), // sass 编译 10 cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件通过管道 11 uglify = require('gulp-uglify'), // js 压缩 12 rename = require('gulp-rename'), // 重命名 13 concat = require('gulp-concat'), // 合并文件 14 notify = require('gulp-notify'), // 相当于 console.log() 15 filter = require('gulp-filter'), // 过滤筛选指定文件 16 jshint = require('gulp-jshint'), // js 语法校验 17 rev = require('gulp-rev-append'), // 插入文件指纹（MD5） 18 cssnano = require('gulp-cssnano'), // CSS 压缩 19 imagemin = require('gulp-imagemin'), // 图片优化 20 browserSync = require('browser-sync'), // 保存自动刷新 21 fileinclude = require('gulp-file-include'), // 可以 include html 文件 22 autoprefixer = require('gulp-autoprefixer'); // 添加 CSS 浏览器前缀 23 24 // sass 25 gulp.task('sass', function() { 26 return sass('src/sass/**/*.scss', {style: 'expanded'}) // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道并设置输出格式 27 .pipe(cached('sass')) // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存） 28 .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本 29 .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下（不影响此时管道里的文件流） 30 .pipe(rename({suffix: '.min'})) // 对管道里的文件流添加 .min 的重命名 31 .pipe(cssnano()) // 压缩 CSS 32 .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本 33 }); 34 35 // css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本） 36 gulp.task('css', function() { 37 return gulp.src('src/css/**/*.css') 38 .pipe(cached('css')) 39 .pipe(gulp.dest('dist/css')) // 把管道里的所有文件输出到 dist/css 目录 40 .pipe(filter(['**/*', '!**/*.min.css'])) // 筛选出管道中的非 *.min.css 文件 41 .pipe(autoprefixer('last 6 version')) 42 .pipe(gulp.dest('dist/css')) // 把处理过的 css 输出到 dist/css 目录 43 .pipe(rename({suffix: '.min'})) 44 .pipe(cssnano()) 45 .pipe(gulp.dest('dist/css')) 46 }); 47 48 // styleReload （结合 watch 任务，无刷新CSS注入） 49 gulp.task('styleReload', ['sass', 'css'], function() { 50 return gulp.src(['dist/css/**/*.css']) 51 .pipe(cached('style')) 52 .pipe(browserSync.reload({stream: true})); // 使用无刷新 browserSync 注入 CSS 53 }); 54 55 // script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本） 56 gulp.task('script', function() { 57 return gulp.src(['src/js/**/*.js']) 58 .pipe(cached('script')) 59 .pipe(gulp.dest('dist/js')) 60 .pipe(filter(['**/*', '!**/*.min.js'])) // 筛选出管道中的非 *.min.js 文件 61 // .pipe(jshint('.jshintrc')) // js的校验与合并，根据需要开启 62 // .pipe(jshint.reporter('default')) 63 // .pipe(concat('main.js')) 64 // .pipe(gulp.dest('dist/js')) 65 .pipe(rename({suffix: '.min'})) 66 .pipe(uglify()) 67 .pipe(gulp.dest('dist/js')) 68 }); 69 70 // image 71 gulp.task('image', function() { 72 return gulp.src('src/img/**/*.{jpg,jpeg,png,gif}') 73 .pipe(cached('image')) 74 .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true, multipass: true})) 75 // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化 76 .pipe(gulp.dest('dist/img')) 77 }); 78 79 // html 编译 html 文件并复制字体 80 gulp.task('html', function () { 81 return gulp.src('src/*.html') 82 .pipe(fileinclude()) // include html 83 .pipe(rev()) // 生成并插入 MD5 84 .pipe(gulp.dest('dist/')) 85 }); 86 87 // clean 清空 dist 目录 88 gulp.task('clean', function() { 89 return del('dist/**/*'); 90 }); 91 92 // build，关连执行全部编译任务 93 gulp.task('build', ['sass', 'css', 'script', 'image'], function () { 94 gulp.start('html'); 95 }); 96 97 // default 默认任务，依赖清空任务 98 gulp.task('default', ['clean'], function() { 99 gulp.start('build'); 100 }); 101 102 // watch 开启本地服务器并监听 103 gulp.task('watch', function() { 104 browserSync.init({ 105 server: { 106 baseDir: 'dist' // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器 107 } 108 }); 109 110 // 监控 SASS 文件，有变动则执行CSS注入 111 gulp.watch('src/sass/**/*.scss', ['styleReload']); 112 // 监控 CSS 文件，有变动则执行CSS注入 113 gulp.watch('src/css/**/*.css', ['styleReload']); 114 // 监控 js 文件，有变动则执行 script 任务 115 gulp.watch('src/js/**/*.js', ['script']); 116 // 监控图片文件，有变动则执行 image 任务 117 gulp.watch('src/img/**/*', ['image']); 118 // 监控 html 文件，有变动则执行 html 任务 119 gulp.watch('src/**/*.html', ['html']); 120 // 监控 dist 目录下除 css 目录以外的变动（如js，图片等），则自动刷新页面 121 gulp.watch(['dist/**/*', '!dist/css/**/*']).on('change', browserSync.reload); 122 123 });