gulp——用自动化构建工具增强你的工作流程

想要使用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的插件依赖（如果你像我一样懒，可以在第一次生成之后直接保存，以后直接拿过去用，根据需求做相应的改动就行了）

　　

 {
   "name": "gulp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "babel-preset-es2015": "^6.18.0",
     "del": "^2.2.2",
     "event-stream": "^3.3.4",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-concat": "^2.6.1",
     "gulp-cssmin": "^0.2.0",
     "gulp-htmlmin": "^4.0.0",
     "gulp-imagemin": "^3.4.0",
     "gulp-less": "^3.3.0",
     "gulp-minify-css": "^1.2.4",
     "gulp-minify-inline-scripts": "^0.0.6",
     "gulp-obfuscate": "^0.2.9",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",
     "gulp-sass": "^3.0.0",
     "gulp-uglify": "^2.1.2",
     "gulp-url-replace": "^1.0.2",
     "imagemin-pngquant": "^5.0.0",
     "webchen-ddky-append": "^0.1.8"
   }
 }

　　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文档里有一个模板，大概就是那个样子的，当然，我也给你准备了一个哦）

 // 获取 gulp
 var gulp = require('gulp');
 var uglify = require('gulp-uglify');
 var rename = require('gulp-rename');
 
 // 压缩 js 文件
 // 在命令行使用 gulp script 启动此任务
 gulp.task('script', function() {
     // 1. 找到文件
     gulp.src('src/js/*.js')
     //rename压缩后的文件名
         .pipe(rename({suffix: '.min'}))
     // 2. 压缩文件
         .pipe(uglify({ mangle: false }))
     // 3. 另存压缩后的文件
         .pipe(gulp.dest('dist/js'))
 })
 
 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的用法总结了一下，希望以后能用的到