輕鬆使用gulp

gulp 是基於 node 實現 Web 前端自動化開發的工具，利用它可以極大的提升開發效率。 在 Web 前端開發工做中有不少「重複工做」，好比壓縮CSS/JS文件。而這些工做都是有規律的。找到這些規律，並編寫 gulp 配置代碼,讓 gulp 自動執行這些「重複工做」。

1.安裝

//全局安裝
npm install -g gulp
或
cnpm install -g gulp複製代碼

2.在工程中生成package.json文件

npm init複製代碼

3.在工程中安裝gulp

npm install  gulp --save-dev
或
cnpm install  gulp --save-dev複製代碼

4.在工程的根目錄下建立gulpfile.js文件

5.gulp使用前的準備

5.1安裝須要使用的各類插件（基於gulp的插件 如壓縮js能夠使用gulp-uglify插件，壓縮css，html，images等插件）

5.2在 gulpfile.js 中編寫代碼

// 獲取 gulp
var gulp = require('gulp')複製代碼

require() 是 node （CommonJS）中獲取模塊的語法。

在 gulp 中你只須要理解 require() 能夠獲取模塊。

5.3獲取 gulp-uglify 組件

// 獲取 uglify 模塊（用於壓縮 JS）
var uglify = require('gulp-uglify')複製代碼

5.4建立壓縮任務

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script',//任務名 function() {
    // 1\. 找到指定文件
    gulp.src('js/index.js')
    // 2\. 壓縮文件
        .pipe(uglify())
    // 3\. 另存壓縮後的文件地址
        .pipe(gulp.dest('dist/js'))
})


在gulp4以上，寫成

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script',async //異步處理 function() {
    // 1\. 找到指定文件
    gulp.src('js/index.js')
    // 2\. 壓縮文件
        .pipe(uglify())
    // 3\. 另存壓縮後的文件地址
        .pipe(gulp.dest('dist/js'))
})複製代碼

以上爲壓縮js文件，其餘操做步驟和上面相似。

6.進行gulp操做

$ gulp 任務名複製代碼

注意：gulp4以上若是須要同時壓縮多個文件，除了在回調函數前面加async異步處理外，執行以下操做

gulp.task("新的任務名",gulp.series("任務名1","任務名2",....,"任務名n",function(){

console.log("hello");

});複製代碼

多個文件同時壓縮時，能夠不傳任務名運行

$ gulp複製代碼

若是一個文件夾下有多個文件須要處理，能夠進行批量操做

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script',async //異步處理 function() {
    // 1\. 找到指定文件
    gulp.src('js/*.js') //*表示js文件夾下後綴名爲js的文件所有壓縮
    // 2\. 壓縮文件
        .pipe(uglify())
    // 3\. 另存壓縮後的文件地址
        .pipe(gulp.dest('dist/js'))
})複製代碼

以上爲js批量壓縮，其餘批量壓縮與其相似。