从0开始使用gulp升级项目。
Posted 程序员物语
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从0开始使用gulp升级项目。相关的知识，希望对你有一定的参考价值。
## 为什么使用Gulp？
为什么使用gulp而不使用webpack？那就要交代一下项目背景以及需求了；1.公司的全部项目并没有完全分离，算是半分离，前端代码和JAVA代码在一个工程里面。2.对前端的静态资源进行优化，统一。3.未来项目是脱离angualrjs框架，放弃SPA。4.适用公司已有的多个工程（有angularJS的工程和JQ为主的工程）。5.造轮子，开发一套自己的前端框架，并且给外包调用。6.不能影响已有的功能。
综上所述，我选择了功能简洁的gulp。
## 搭建脚手架
首先安装node。可以前往[node 中文网](http://nodejs.cn/)下载适合自己的安装包。
安装完成之后在命令行中输入`node -v`，如果出现版本号则安装成功。
安装gulp: 在命令行中输入`npm install gulp -g` 全局安装gulp，完成之后查看版本号`gulp -v`测试是否安装成功。
编写`package.json`配置文件。
```
{
"name": "wq-public-style",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"eslint": "^4.12.1",
"eslint-loader": "^1.9.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-babel": "^7.0.0",
"gulp-concat": "^2.6.1",
"gulp-eslint": "^4.0.0",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^3.0.0",
"sass": "^1.0.0-beta.3"
},
"dependencies": {
"gulp-cache": "^1.0.1",
"gulp-clean-css": "^3.9.0",
"gulp-imagemin": "^4.0.0"
}
}
```
这里用到的插件：`gulp-eslint`JS检测插件,`gulp-sass`css预编译插件，`gulp-concat`合并成指定文件名的插件，`gulp-uglify`js压缩插件，`gulp-rename`文件重命名插件，`gulp-babel`jses6转es5插件，`gulp-clean-css`css压缩插件，`gulp-autoprefixer`css前缀自动补全插件，`gulp-imagemin`图片压缩插件，`gulp-cache`图片改变插件，与`imagemin`配合，只压缩改变的图片。
创建好`package.json`之后执行命令`npm install` 加载`package`内写的全部插件以及依赖。执行完成之后会自动创建`node_modules`和`package-lock.json`这两个东西是不需要提交到代码仓库的。
首先，我们先配置一下eslint的规则，在更目录创建`.eslintrc`配置文件，这里是配置JS检查的规则，具体的[规则配置项](https://gitee.com/LengJuns/codes/560dxf9wnoj8e41pruqml91)
然后，我们配置`babel`，需要创建`.babelrc`文件，[教程参考](http://www.ruanyifeng.com/blog/2016/01/babel.html)
最后我们配置最关键的gulp任务创建`gulpfile.js`，因为每个人的项目都不同，授人以鱼不如授人以渔，我这边就写几个例子：
```
// 使用eslint 检查JS文件
//检查所有以.js为后缀的文件，执行eslint插件，
//globals是哪些不检查，我这边不检查jquery的$和jQuery、underscore的_。
let eslint = require('gulp-eslint')
gulp.task('lint', function(){
gulp.src('./**/*.js')
.pipe(eslint({
globals: [
'jQuery',
'$',
'_'
]
}))
.pipe(eslint.format());
})
```
```
//压缩图片
//src的路径只要最终是字符串即可，paths.images可以自己定义，+(|||)代表选择的范围
//progressive 是是否开启无损压缩
//gulp.dest 将之前的操作生成的文件放在哪个目录下。
let cache = require('gulp-cache'),
imagemin = require('gulp-imagemin')
gulp.task('build-img', function(){
gulp.src(paths.images + '/**/*.+(jpeg|jpg|png|gif|svg)')
.pipe(cache(imagemin({
progressive: true
})))
.pipe(gulp.dest(output + 'images'));
})
```
```
//css 压缩合并
//src除了传字符串也能传数组，数组中的每一项都是一个路径
//sass是编译sass/scss的插件，我这用的是scss，如果你用的是sass改一下即可。
//autoprefixer 是自动补全CSS前缀的，省的自己写或者忘记写。
//cleancss 是css的压缩
//最后将编译压缩好的文件放在提前定义好的buildUrl目录下。
let sass = require('gulp-sass');
let cleancss = require('gulp-clean-css');
let autoprefixer = require('gulp-autoprefixer');
gulp.task('build-css', function () {
gulp.src([srcUrl + '**/*.+(css|scss)',srcUrl2 + **/*.css])
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(cleancss({
advanced: false,
keepSpecialComments: '*'
}))
.pipe(gulp.dest(buildUrl));
});
```
```
//js压缩，
//babel、uglify分别是es6的编译和压缩工具，
gulp.task('bu-js', function() {
gulp.src([srcUrl+'**/*.js'])
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest(buildUrl));
});
```
```
//定义多个任务，
//可以将多个任务封装成一个任务，比如lint+bu-js才是我们需要的，先检查然后再执行压缩。
//也可以用run来定义。两种方式都可以。
const taskrun = {
js:['lint', 'bu-js'],
css:[ 'build-css','xxx','xxx']
}
// 只压缩和合并 JS
gulp.task('build-js',taskrun.js);
// 压缩合并所有js, css
gulp.task('build', function(){
gulp.run('build-css', 'build-js', 'build-font', 'build-img', function (err) {
if(err == null){
console.log('js，css 合并压缩完成')
}else{
console.log('js，css 合并压缩报错:'+ err)
}
});
});
```
```
//定义开发任务，平常开发的时候改的最多的时候就是js和css，所以我们监听他们，一旦改变就执行相关命令。如果img,font之类的改变就单独执行命令，毕竟这些不怎么需要变动
gulp.task('dev', function() {
// 监听文件变化
gulp.watch(srcUrl + '**/*.+(css|scss)', function(){
gulp.run('build-css');
});
// 监听文件变化
gulp.watch(srcUrl + '**/*.+(js)', function(){
gulp.run('build-js');
});
})
```
这样基础的gulp开发环境就搭建好了，当然，如果你需要比如热更新、静态服务之类的功能也是可以的，只不过对我来说这些都不是必要且作用不大的东西，也就不弄了。
gulp比webpack更简单轻量，而且出错也更容易排查，gulp的任务都是根据`.pipe`依次执行的，开发者更容易掌控，不像webpack，对大多数人来说它的内部运行都是'黑盒'。
以上是关于从0开始使用gulp升级项目。的主要内容，如果未能解决你的问题，请参考以下文章