Gulp的安裝配置過程和一些小坑

　　談談gulp。

　　項目尾聲，老師叫我去熟悉一下grunt前端自動化工具，第一次知道這種東西，我就查各種資料啊，發現grunt已經‘過時’了，大家都用gulp和webpack。我當然選擇了配置最簡單的gulp=-=

　　gulp是基於Nodejs的自動任務運行器，基本流程就是先安裝nodejs，通過nodejs的npm全局安裝和項目安裝gulp，其次在項目里安裝所需要的gulp插件，然后新建gulp的配置文件gulpfile.js並寫好配置信息（定義gulp任務），最后通過命令提示符運行gulp（webstorm神器更簡單）。

　　安裝nodejs就不說了，一步步默認，打開cmd控制台，直接查看node版本，檢測是否安裝成功

　　

　　全局安裝gulp，出現warn不要緊，等他慢慢轉，表示正在聯網下載...

npm install -g gulp

　　全局安裝完成后，通過cmd進入項目目錄創建package.json文件，這是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件：

　　

　　直接在后面加上 -y 會自動生成，省去一步步的選擇填空操作。

　　接着在cmd項目目錄下開始本地安裝gulp各種插件，在這里找你需要的插件。有四個是用得最多的，必備的

　　　　1、語法檢查   （gulp-jshint）

　　　　2、合並文件   （gulp-concat）

　　　　3、壓縮代碼   （gulp-uglify）

　　　　4、文件重命名   （gulp-rename）

　　就拿gulp-jshint舉例吧，在cmd項目目錄下輸入

npm install gulp-jshint --save-dev

　　--save-dev 是可以省掉你手動修改package.json文件的步驟，正常情況下得連同版本號手動將他們添加到模塊配置文件package.json中的依賴里

　　

　　安裝配置完成，要開始寫代碼啦。

　　在項目目錄下新建Gulpfile.js文件，gulp有五種方法：task，run，watch，src，和dest.

//引入組件
 1 var gulp = require('gulp');

var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var minify_css = require('gulp-minify-css');

//創建任務
gulp.task('hint',function(){
  return gulp.src(['a.js', 'b.js', 'c.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp.task('script', function () {
  return gulp.src(['a.js', 'b.js', 'c.js'])
    .pipe(concat('ABC.js'))
    .pipe(gulp.dest('application'))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('application'));
});

gulp.task('css1', function () {
  return gulp.src('dist/css/d.css')
    .pipe(minify_css())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('application'));
});

gulp.task('css2', function () {
  return gulp.src(['dist/css/e.css', 'dist/css/f.css'])
    .pipe(concat('EF.css'))
    .pipe(gulp.dest('application'))
    .pipe(minify_css())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('application'));
});

gulp.task('watch', function () {
  gulp.watch(['a.js', 'b.js', 'c.js'], ['script']);
  gulp.watch('dist/css/d.css', ['css1']);
  gulp.watch(['dist/css/e.css', 'dist/css/f.css'], ['css2']);
});

gulp.task('clean', function () {
  return gulp.src('application', {read: false})
    .pipe(clean());
});

gulp.task('default', ['clean'], function () {
  gulp.run('hint','script', 'css1', 'css2', 'watch');
});

 

　　代碼很簡單，也很容易理解，來談談我遇到的一點小小的坑。

　　代碼敲完，需要回到命令行，運行gulp。直接輸入gulp，就開始運行，期間會報一些error，不要緊張，指的是js文件里一些語法錯誤，無傷大雅，成功創建出壓縮文件才是最終目的。

　　那么如果需要修改代碼，必須一直把cmd控制台保持打開狀態，否則無法執行watch操作。第一點坑，就是編輯器的自動保存功能，一行代碼如果寫的不順，或是中途打岔，比如‘$scope.’，還沒接着寫完，編輯器自動保存的功能會使jshint檢查出語法錯誤，導致gulp的停止運行。如果用的是webstrom編輯器的，可以不用每次打開命令行，右鍵選中gulpfile.js，show gulp tasks，再點擊default即可。

　　

　　操作過程中，我遇到的第二個坑就是clean插件的使用問題上。最開始我寫的代碼不是像上面那樣，watch任務是直接在script，css任務最后執行，最后兩塊寫的是

 gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']);

　　之后怎么都不能好好工作，原來，在default里面的任務是同步操作的！！是會出現邊編譯邊刪除的的情況的！！還是一步一步來，不要想着一步到位。先創建watch任務，再創建clean，最后default的時候，不要把clean寫在run里面，配置一個異步就搞定了。

　　這是修改編輯器（webstrom）自動保存的：

　　

 

 

　　好了，好了。

　　第一次寫這玩意，很多地方都得自己再搞清楚一遍才敢往上寫，對自己提升還是很有幫助的。