使用gulp構建一個項目

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（轉載：https://blog.csdn.net/zchcode/article/details/51556699）

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

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

1、安裝nodejs

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

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

常用的npm命令

npm init——初始化

npm install——安裝插件

npm install plugname -g——全局安裝

npm install [email protected]——安裝具體某個版本的插件

npm update——更新插件

npm uninstall——卸載插件

常用dos命令

cd 進入某個目錄

cd.. 返回上一級

dir 查看列表

cls 清除屏幕

del name 刪除文件

md name 新建目錄名

rd name 刪除目錄名

copy con name.txt 新建文件

del name.txt 刪除文件

2、全局安裝gulp

npm install gulp -g

3、創建本地項目

上面是準備工作，安裝完全局gulp之後，cd到項目文件夾安裝本地gulp，安裝之前要先初始化

npm init

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

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

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

5、安裝各種插件

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"
  }

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 可避免這種情況

6、gulp如何使用

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

gulp一共五中方法：

gulp.task()——新建任務

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

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

gulp.run()——運行任務

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

7、編寫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 回車即可。

補充：

將本文件夾下的文件發布到其他盤

//註意src的參數
gulp.task(‘distCopyEclipse‘,function(){
    return gulp.src(‘src/cssEclispe/*‘,{nodir:true})
    .pipe(cached(‘distCopyEclipse‘))
    .pipe(gulp.dest(‘D:/workSpace/makerplateform/webapp/instantcommunication/theme/css‘))
    .pipe(gulp.dest(‘D:/tomcat7/webapps/makerplateform/instantcommunication/theme/css‘));
});

使用gulp構建一個項目