想要使用gulp，就要了解gulp，就像追自己的爱豆，你要知道爱豆的喜好、兴趣
简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1. gulp的用途：
-
代码压缩
-
CSS自动加前缀
-
LESS编译
-
地址版本追加
-
文件合并
-
文件修改自动刷新页面
-
更新编译本地依赖静态资源自动加缓存戳避免客户端浏览器缓存
看到这些作用，似乎gulp与grunt没什么区别
然鹅，对于这两款作用相同的前端自动化构建工具，为什么更多的人更倾向于gulp呢？
这就要从“性能”上来说了
就像功能相同的两款手机：Apple和Samsung
Apple的使用人数显然要高过Samsung，因为Apple较之Samsung更安全，使用起来更方便
那么，反观我们的gulp较之grunt这个款自动化构建工具：
Grunt专注于配置，而Gulp专注于代码（写法更易于使用者接受）
gulp的任务目标更明确，效率更快（gulp任务划分明确，当出现多个任务同步执行时，可以利用gulp中的时间监听来决定执行事件流。当然不管是gulp还是grunt都不建议一个task同时进行多个操作）
2. gulp的安装及使用：
gulp需要在Node.js的环境下运行，所以gulp的插件需要npm来运行，麻蛋，不止是它，现在前端越来越多的东西都建立在node的基础上了~伤不起了啊
使用Gulp需要先在项目下安装Gulp模块
初始化项目环境
npm init
进入项目，安装gulp
npm install gulp --save-dev
在根目录下创建gulp配置文件gulpfile.js（gulp所有的任务都是在这里配置的）
如果你已经坚持到了这里，那说明你离成功不远了
ex:复制压缩一个css文件
注：task是定义任务 src是需要打包的路径 dest是输出路径 pipe()是数据流的管道
同grunt一样，gulp也要有保存开发插件的依赖——packge.json
创建方式： 打开命令行进入开发的工作目录，输入 npm init 就会自动生成一个空的package.json文件
过程中，你会觉得和使用vue的路程相似，填一堆信息，大概就是这样的：
然鹅，这些都不重要，重要的是你要知道你生成packge.json的目的 嘿嘿嘿~
好了，有位大神已经总结了一些常用的插件，至于其他的视项目而定吧
gulp插件的安装：
npm install <插件> -D
注：-D 就是 --save-dev 是默认把该插件保存到本地的package.json的依赖中
注：--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等
如果我们换了电脑，可以直接把这个带有依赖的package.json拿过来直接执行 npm isntall 就会把所有依赖的插件全部下载下来，所以最好是在下载的时候添加 -D
3.摒除以上的脏乱差的解说，我们举个通俗易懂的栗子吧——压缩js
1.通过黑窗口cd到我们的项目
2. npm init 生成packge.json这个文件，目的就是存放gulp的插件依赖（如果你像我一样懒，可以在第一次生成之后直接保存，以后直接拿过去用，根据需求做相应的改动就行了）
1 { 2 "name": "gulp", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo "Error: no test specified" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "babel-preset-es2015": "^6.18.0", 13 "del": "^2.2.2", 14 "event-stream": "^3.3.4", 15 "gulp": "^3.9.1", 16 "gulp-babel": "^6.1.2", 17 "gulp-concat": "^2.6.1", 18 "gulp-cssmin": "^0.2.0", 19 "gulp-htmlmin": "^4.0.0", 20 "gulp-imagemin": "^3.4.0", 21 "gulp-less": "^3.3.0", 22 "gulp-minify-css": "^1.2.4", 23 "gulp-minify-inline-scripts": "^0.0.6", 24 "gulp-obfuscate": "^0.2.9", 25 "gulp-rename": "^1.2.2", 26 "gulp-replace": "^0.5.4", 27 "gulp-sass": "^3.0.0", 28 "gulp-uglify": "^2.1.2", 29 "gulp-url-replace": "^1.0.2", 30 "imagemin-pngquant": "^5.0.0", 31 "webchen-ddky-append": "^0.1.8" 32 } 33 }
3. npm install <name> --sava-dev 安装你的插件（会自动生成node_modules文件，里面主要存放的就是你的插件啦）
注：如果你有配置好的packge.json文件，直接放到了项目里，那就不用一个一个安装插件啦，直接npm install就行
如果你觉得一个一个安装插件太麻烦，可以npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev的方式，一次安装多个
4. 在根目录下，新建一个gulpfile.js（gulp文档里有一个模板，大概就是那个样子的，当然，我也给你准备了一个哦）
1 // 获取 gulp 2 var gulp = require('gulp'); 3 var uglify = require('gulp-uglify'); 4 var rename = require('gulp-rename'); 5 6 // 压缩 js 文件 7 // 在命令行使用 gulp script 启动此任务 8 gulp.task('script', function() { 9 // 1. 找到文件 10 gulp.src('src/js/*.js') 11 //rename压缩后的文件名 12 .pipe(rename({suffix: '.min'})) 13 // 2. 压缩文件 14 .pipe(uglify({ mangle: false })) 15 // 3. 另存压缩后的文件 16 .pipe(gulp.dest('dist/js')) 17 }) 18 19 gulp.task('default', ['script']);
5.当packge.json和gulpfile.js准备好之后，你会发现，此时你的项目文件是这样的：
除了上述我们提到的json、js和node_modules,你会发现还多了一个packge-lock.json
不用担心，这是正常的，package-lock.json 是在 npm install 的时候生成的一份文件，主要目的就是用以记录当前状态下实际安装的各个npm package(插件)的具体来源和版本号，确保你每次安装的库包都与之前的一样
6.恭喜你，走到了这里，说明你离成功只有一步之遥啦 而这最后一步就是运行gulp来压缩你的js啦
gulp script 或者是直接执行 gulp
注：当执行gulp default或gulp将会调用default任务里的所有任务，如果想执行一个任务时，可以命令提示符执行gulp+任务名称，建议是一个一个任务执行
7.走到这里，可以小确幸一下啦
多出来的这个dist>js文件就是刚刚压缩完成的js啦
简单的把gulp的用法总结了一下，希望以后能用的到