從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，之後試試