VS中使用Gulp

關於gulp資料能夠訪問:http://www.gulpjs.com.cn/，本篇主要講解在VS中使用gulp對js和css進行壓縮合並

一、下載node.js，gulp依賴於node.js，能夠訪問http://nodejs.cn/下載，本人下載的4.4.4版本，下載完後進行傻瓜式安裝，注意安裝路徑最好不要含有空格或中文

二、安裝gulp以及須要的插件

    一、輸入命令進行安裝gulp

        npm install --global gulp

    二、安裝須要用到的插件，能夠選擇安裝

        npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-notify

    三、輸入gulp -v，若是能出現版本號說明安裝成功

三、新建Web項目，並在項目根目錄下新建gulpfile.js，內容爲：

 1 var gulp = require('gulp');
 2 
 3 // 引入組件
 4 var //htmlmin = require('gulp-htmlmin'), //html壓縮
 5     minifycss = require('gulp-minify-css'),//css壓縮
 6     uglify = require('gulp-uglify'),//js壓縮
 7     concat = require('gulp-concat'),//文件合併
 8     rename = require('gulp-rename'),//文件改名
 9     notify = require('gulp-notify');//提示信息
10 
11 /*
12 *：匹配任意數量的字符，不包括/
13 ?：匹配單個字符，不包括/
14 **：匹配任意數量的字符，包括/
15 {}：容許使用逗號分隔的列表，表示「or」（或）關係
16 !：用於模式的開頭，表示只返回不匹配的狀況
17 */
18 //好比，Scripts/*.js匹配Scripts目錄下面的文件名以.js結尾的文件，
19 //CSS/**/*.css匹配CSS目錄和它的全部子目錄下面的文件名以.css結尾的文件，
20 //!*.css表示匹配全部後綴名不爲「.css」的文件。
21 var cssPath = ['CSS/**/*.css'];
22 var jsPath = ['Scripts/*.js'];
23 
24 // 合併、壓縮、重命名css
25 gulp.task('css', function () {
26     return gulp.src(cssPath)
27     .pipe(concat('main.css'))
28     .pipe(rename({ suffix: '.min' }))
29     .pipe(minifycss())
30     .pipe(gulp.dest('dest/css'));
31     //.pipe(notify({ message: 'css task ok' }));
32 });
33 
34 // 合併、壓縮js文件
35 gulp.task('js', function () {
36     return gulp.src(jsPath)
37     .pipe(concat('main.js'))
38     .pipe(rename({ suffix: '.min' }))
39     .pipe(uglify())
40     .pipe(gulp.dest('dest/js'));
41     //.pipe(notify({ message: 'js task ok' }));
42 });
43 
44 // 默認任務
45 gulp.task('default', function () {
46     gulp.run('css', 'js');
47 
48     // 監聽 .css files 改變則會從新壓縮
49     gulp.watch(cssPath, ['css']);
50 
51     // 監聽 .js files 改變則會從新壓縮
52     gulp.watch(jsPath, ['js']);
53 });

四、若是安裝的是VS2015則不須要安裝插件，右鍵gulpfile.js會有task runner explorer，若是是VS2013或其餘版本：

    在VS工具-擴展更新-聯機-輸入task runner explorer搜索安裝

     

五、若是出現此頁面則成功了，雙擊某個任務便可運行

六、我這裏是雙擊default任務，運行結果：

 

結語：在默認的系統盤下安裝了gulp以及插件，可是換到其餘盤符又不行了，須要從新在該盤安裝

Demo下載