从0开始使用gulp升级项目。

为何使用Gulp？

为何使用gulp而不使用webpack？那就要交代一下项目背景以及需求了；1.公司的所有项目并无彻底分离，算是半分离，前端代码和JAVA代码在一个工程里面。2.对前端的静态资源进行优化，统一。3.将来项目是脱离angualrjs框架，放弃SPA。4.适用公司已有的多个工程（有angularJS的工程和JQ为主的工程）。5.造轮子，开发一套本身的前端框架，而且给外包调用。6.不能影响已有的功能。 综上所述，我选择了功能简洁的gulp。

搭建脚手架

首先安装node。能够前往node 中文网下载适合本身的安装包。

安装完成以后在命令行中输入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-eslintJS检测插件,gulp-sasscss预编译插件，gulp-concat合并成指定文件名的插件，gulp-uglifyjs压缩插件，gulp-rename文件重命名插件，gulp-babeljses6转es5插件，gulp-clean-csscss压缩插件，gulp-autoprefixercss前缀自动补全插件，gulp-imagemin图片压缩插件，gulp-cache图片改变插件，与imagemin配合，只压缩改变的图片。

建立好package.json以后执行命令npm install 加载package内写的所有插件以及依赖。执行完成以后会自动建立node_modules和package-lock.json这两个东西是不须要提交到代码仓库的。

首先，咱们先配置一下eslint的规则，在更目录建立.eslintrc配置文件，这里是配置JS检查的规则，具体的规则配置项

而后，咱们配置babel，须要建立.babelrc文件，教程参考

最后咱们配置最关键的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，对大多数人来讲它的内部运行都是'黑盒'。

大佬们说前端这方面最优的解决方案是webpack+gulp，之后试试