什么是gulp?
一個前端構(gòu)建工具，通過腳本實現(xiàn)文件、圖片的壓縮等功能，
功能的實現(xiàn)依賴于插件，所以想使用什么功能，必須先安裝對應(yīng)的插件。
gulp的安裝、使用
1、安裝node環(huán)境
node環(huán)境安裝包下載地址：https://nodejs.org/en/download/
根據(jù)操作系統(tǒng)選擇不同平臺的安裝包，下載完畢后雙擊安裝包即可安裝。
安裝完畢后再控制臺（windows系統(tǒng)使用DOS窗口）輸入以下命令測試是否安裝成功：
查看node版本號：node -v
查看npm版本號：npm -v
輸入以上命令，只要控制臺能打印出版本號就說明已經(jīng)安裝成功，否則需要重新安裝。
2、全局安裝gulp
在DOS中執(zhí)行：npm install -g gulp
3、在要使用gulp的項目中單獨安裝一次gulp（方便單獨操作各個項目），同時安裝所需要的插件
gulp-uglify插件是壓縮.js文件的插件
命令： npm install gulp gulp-uglify
4、在項目根目錄下創(chuàng)建gulpfile.js文件，在文件中定義需要完成的任務(wù)

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

/* task函數(shù)：開啟gulf任務(wù)的函數(shù)，第一個參數(shù)是任務(wù)名稱，在執(zhí)行
 * 任務(wù)時是通過任務(wù)名稱調(diào)起執(zhí)行，如果不給任務(wù)名稱的值或值是default，則表示該任務(wù)
 * 是默認(rèn)任務(wù)：在調(diào)起相關(guān)任務(wù)時，沒有指定任務(wù)名稱，會執(zhí)行默認(rèn)任務(wù)（DOS命令：gulp）。
 * 若給任務(wù)名稱，則在執(zhí)行g(shù)ulpfile.js文件時，DOS命令為 gulp + 任務(wù)名稱
 */
/*gulp.task('default', function(){
    gulp.src('./index.js')
    .pipe(uglify())
    .pipe(gulp.dest('./index-min.js')); // 寫入到指定的文件夾
});*/

gulp.task('hello', function(){ // hello為任務(wù)名稱
    gulp.src('./*js')   // 壓縮所有的.js文件
    .pipe(uglify())
    .pipe(gulp.dest('./index.min.js')); // 寫入到指定的文件夾（例如：index.min.js是文件夾名稱）
//  .pipe(gulp.dest('index.min.js/'));  // 將壓縮的文件.js存放在index.min.js文件中
});

5、切換到gulpfile.js所在的文件夾下，運(yùn)行g(shù)ulp任務(wù)
DOS命令：gulp 任務(wù)名稱
如果gulp命令后沒有加任務(wù)名，則執(zhí)行默認(rèn)任務(wù)（default）
如果gulp后添加了任務(wù)名，則執(zhí)行指定的任務(wù)

gulp的常用的方法

1、gulp.src(path)：指定要操作的文件（以流的形式讀取出來）。
參數(shù)是要讀取的文件的路徑，如果要匹配多個文件路徑，可以使用數(shù)組結(jié)構(gòu)
2、gulp.task(name , function)：
name：任務(wù)名，如果沒有指定任務(wù)名，默認(rèn)是default
function：任務(wù)所對應(yīng)的實現(xiàn)函數(shù)
注意：如果需要按某個順序執(zhí)行多個任務(wù)，可以在中間插入第二個參數(shù)：依賴任務(wù)

        // 只要執(zhí)行default任務(wù)，就相當(dāng)于把one、two、three這三個任務(wù)執(zhí)行了
        gulp.task('default',['one','two','three']);

3、gulp.dest(path)：把文件流寫入到指定的位置
參數(shù)是要寫入的路徑（文件名是讀取時的名字），如果需要修改寫入的文件名，則需要使用插件修改：gulp-rename

gulp常用插件
1、重命名插件
安裝方法：npm install gulp-rename

image.png

image.png

image.png

image.png

image.png

image.png

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

/* task函數(shù)：開啟gulf任務(wù)的函數(shù)，第一個參數(shù)是任務(wù)名稱，在執(zhí)行
 * 任務(wù)時是通過任務(wù)名稱調(diào)起執(zhí)行，如果不給任務(wù)名稱的值或值是default，則表示該任務(wù)
 * 是默認(rèn)任務(wù)：在調(diào)起相關(guān)任務(wù)時，沒有指定任務(wù)名稱，會執(zhí)行默認(rèn)任務(wù)（DOS命令：gulp）。
 * 若給任務(wù)名稱，則在執(zhí)行g(shù)ulpfile.js文件時，DOS命令為 gulp + 任務(wù)名稱
 */
/*gulp.task('default', function(){
    gulp.src('./index.js')
    .pipe(uglify())
    .pipe(gulp.dest('./index-min.js')); // 寫入到指定的文件夾
});*/

gulp.task('hello', function(){ // hello為任務(wù)名稱
    gulp.src('./index.js')   // 壓縮所有的.js文件
    .pipe(uglify())  // 使用插件進(jìn)行壓縮.js文件
    .pipe(rename('./index.min.js'))  // 調(diào)用rename插件
    .pipe(gulp.dest('./index.min.js')); // 寫入到指定的文件夾（例如：index.min.js是文件夾名稱）
//  .pipe(gulp.dest('index.min.js/'));  // 將壓縮的文件.js存放在index.min.js文件中
});