2016-7-15(1)使用gulp構建一個項目

gulp是前端開發過程當中自動構建項目的工具，相同做用的還有grunt。構建工具依 靠插件可以自動監測文件變化以及完成js/sass/less/html/image/css/coffee等文件的語法檢查、合併、重命名、壓縮、格式 化、瀏覽器自動刷新、部署文件等功能。

gulp是基於Nodejs的自動運行器，他借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出是後一級的輸入。下面是具體流程：

一、安裝nodejs

nodejs下載地址：https://nodejs.org/

nodejs自帶npm模塊管理器，安裝完成以後打開dos命令窗口輸入 node -v就能查看nodejs是否安裝成成功

經常使用的npm命令

npm init——初始化

npm install——安裝插件

npm install plugname -g——全局安裝

npm install plugname@2.3.0——安裝具體某個版本的插件

npm update——更新插件

npm uninstall——卸載插件

經常使用dos命令

cd 進入某個目錄

cd.. 返回上一級

dir 查看列表

cls 清除屏幕

del name 刪除文件

md name 新建目錄名

rd name 刪除目錄名

copy con name.txt 新建文件

del name.txt  刪除文件

二、全局安裝gulp

npm install gulp -g

三、建立本地項目

上面是準備工做，安裝徹底局gulp以後，cd到項目文件夾安裝本地gulp，安裝以前要先初始化

npm init

初始化的時候要求你輸入一些值，不輸的直接回車便可，點擊y以後在根目錄自動建立了一 個package.json文件，這個文件用來存放即將安裝的插件name和version，這個文件有什麼用呢？當咱們把項目拷貝給別人的時候不須要拷 貝插件，只須要把項目文件、package.json和gulp.file.js拷貝過去就能夠，接收人cd到項目文件目錄直接輸入npm install便可安裝上咱們拷貝前安裝的各類插件。

四、設計項目目錄索引結構

└── src/
    ├── less/    *.less 文件
    ├── sass/    *.scss *.sass 文件
    ├── css/     *.css  文件
    ├── js/      *.js 文件
    ├── fonts/   字體文件
    └── images/   圖片
└── dist/

 

五、安裝各類插件

npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev

--save-dev這個命令是將安裝的插件信息寫入package.json文件內的「devDependencies」屬性內，插件所有安裝完以後package.json的變化爲：

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-imagemin": "^2.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "gulp-watch-path": "^0.1.0",
    "stream-combiner2": "^1.1.1"
  }

插件安裝完畢以後會自動建立一個node_modules文件夾，全部插件的依賴都存在這裏面。

gulp——本地gulp
gulp-imagemin——圖片壓縮
gulp-minify-css ——css壓縮
gulp-uglify ——js壓縮
gulp-util ——控制檯代碼着色
gulp-watch-path ——文件不少時編輯那個哪一個壓縮，不會所有壓縮（獲取改變的文件的src和dest路徑）
stream-combiner2——有些 gulp 任務編譯出錯會終止 gulp.watch，使用 gulp-watch-path 配合stream-combiner2 可避免這種狀況

六、gulp如何使用

控制檯輸入gulp的時候首先找尋gulpfile.js文件，在找尋default任務，因此咱們應該手動新建一個名爲gulpfile.js的js文件，將任務寫在裏面。具體文件目錄爲：

gulp一共五中方法：

gulp.task()——新建任務

gulp.src()——獲取文件源地址

gulp.dest()——文件輸出地址

gulp.run()——運行任務

gulp.watch()——監聽文件修改

七、編寫gulpfile.js文件

（1）引入插件變量

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    minifycss = require('gulp-minify-css'),
    imgmin = require('gulp-imagemin'),
    gutil = require('gulp-util'),
    watchPath = require('gulp-watch-path'),
    combiner = require('stream-combiner2');

（2）新建代碼着色與顯示錯誤日誌方法，這個方法用到了gulp-util和stream-combiner2插件

var handleError=function(err){
    console.log('\n');
    gutil.log('fileName: '+gutil.colors.red(err.fileName));
    gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));
    gutil.log('message: ' + err.message);
    gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));
};

（3）新建js批量壓縮任務

gulp.task('script',function(){//script時自定義的
//將文件的源路徑和發佈路徑賦值給相應變量
    var srcJsPath='js/*.js';
    var destJsPath='dist/js/';
    var combined = combiner.obj([
            gulp.src(srcJsPath),//獲取文件源地址
            uglify(),//執行壓縮
            gulp.dest(destJsPath)//將壓縮的文件發佈到新路徑
        ]);
    combined.on('error', handleError);//打印錯誤日誌
});

這種寫法須要css目錄下有不少css文件，只要改變了一個點擊保存的時候gulp會把全部css文件都會壓縮一遍，爲了提升性能咱們能夠利用gulp-watch-path插件只壓縮/發佈修改的文件

gulp.task('watchjs',function(){
    gulp.watch('js/*.js',function(event){
    var paths=watchPath(event,'js/','dist/js/');
        //打印修改類型和路徑
        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
        gutil.log('Dist: ' + paths.distPath);
        //獲取錯誤信息，繼續執行代碼
        var combined = combiner.obj([
                gulp.src(paths.srcPath),
                uglify(),
                gulp.dest(paths.distDir)
            ]);
        combined.on('error', handleError);
    });
});

（4）編寫default任務和監放任務

新建批量任務仍是監聽修改任務根據項目中實際須要去寫，等咱們寫好不少任務以後就須要寫入default中，default寫好以後只須要在dos窗口寫入gulp就能夠自動執行任務

gulp.task('default',function(){
    //默認執行的方法，引號內的內容對應上面task寫的內容
    gulp.run('watchjs','css','images');
    //監控js
    gulp.watch('js/*.js',['watchjs']);
    //監控css
    gulp.watch('css/*.css',['css']);
    //監控img
    gulp.watch('images/*.*',['images']);
});

若是不想執行默認任務只執行js單文件壓縮任務只須要輸入 gulp watchjs便可。控制檯輸入爲下圖：

此時，gulp處於監聽狀態，若是要取消須要按ctrl+c 回車便可。