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各類插件，在這裏找你須要的插件。有四個是用得最多的，必備的

　　　　一、語法檢查   （gulp-jshint）

　　　　二、合併文件   （gulp-concat）

　　　　三、壓縮代碼   （gulp-uglify）

　　　　四、文件重命名   （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');
 2 
 3 var jshint = require('gulp-jshint');
 4 var concat = require('gulp-concat');
 5 var uglify = require('gulp-uglify');
 6 var rename = require('gulp-rename');
 7 var clean = require('gulp-clean');
 8 var minify_css = require('gulp-minify-css');
 9 
//建立任務
10 gulp.task('hint',function(){
11   return gulp.src(['a.js', 'b.js', 'c.js'])
12     .pipe(jshint())
13     .pipe(jshint.reporter('default'));
14 });
15 
16 gulp.task('script', function () {
17   return gulp.src(['a.js', 'b.js', 'c.js'])
18     .pipe(concat('ABC.js'))
19     .pipe(gulp.dest('application'))
20     .pipe(uglify())
21     .pipe(rename({suffix: '.min'}))
22     .pipe(gulp.dest('application'));
23 });
24 
25 gulp.task('css1', function () {
26   return gulp.src('dist/css/d.css')
27     .pipe(minify_css())
28     .pipe(rename({suffix: '.min'}))
29     .pipe(gulp.dest('application'));
30 });
31 
32 gulp.task('css2', function () {
33   return gulp.src(['dist/css/e.css', 'dist/css/f.css'])
34     .pipe(concat('EF.css'))
35     .pipe(gulp.dest('application'))
36     .pipe(minify_css())
37     .pipe(rename({suffix: '.min'}))
38     .pipe(gulp.dest('application'));
39 });
40 
41 gulp.task('watch', function () {
42   gulp.watch(['a.js', 'b.js', 'c.js'], ['script']);
43   gulp.watch('dist/css/d.css', ['css1']);
44   gulp.watch(['dist/css/e.css', 'dist/css/f.css'], ['css2']);
45 });
46 
47 gulp.task('clean', function () {
48   return gulp.src('application', {read: false})
49     .pipe(clean());
50 });
51 
52 gulp.task('default', ['clean'], function () {
53   gulp.run('hint','script', 'css1', 'css2', 'watch');
54 });

 

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

　　代碼敲完，須要回到命令行，運行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）自動保存的：

　　

 

 

　　好了，好了。

　　第一次寫這玩意，不少地方都得本身再搞清楚一遍纔敢往上寫，對本身提高仍是頗有幫助的。