gulp 入門---使用gulp壓縮JS

gulp 是基於 node 實現 Web 前端自動化開發的工具，利用它可以極大的提升開發效率。

在 Web 前端開發工做中有不少「重複工做」，好比壓縮CSS/JS文件。而這些工做都是有規律的。找到這些規律，並編寫 gulp 配置代碼,讓 gulp 自動執行這些「重複工做」。

• 使用 gulp 壓縮 JS
• 使用 gulp 壓縮 CSS
• 使用 gulp 壓縮圖片
• 使用 gulp 編譯 LESS
• 使用 gulp 編譯 Sass
• 使用 gulp 構建一個項目

使用gulp壓縮JS

將規律轉換爲 gulp 代碼

現有目錄結構以下：

└── js/
    └── myDemo.js

規律

1. 找到 js/目錄下的全部 .js 文件
2. 壓縮這些 js 文件
3. 將壓縮後的代碼另存在 dist/js/ 目錄下

編寫 gulp 代碼

gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify({ mangle: false }))
    // 3. 另存壓縮後的文件
        .pipe(gulp.dest('dist/js'))
})

　　代碼執行結果

代碼執行後文件結構

└── js/
│   └── myDemo.js
└── dist/
    └── js/
        └── myDemo.js

myDemo.js 壓縮前

function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------');
    console.log("123");
    conosle.log("1234");
}

myDemo.js 壓縮後

function demo(msg){alert("--------\r\n"+msg+"\r\n--------"),console.log("123"),conosle.log("1234")}

此時 dist/js 目錄下的 .js 文件都是壓縮後的版本。

還能夠監控 js/ 目錄下的 js 文件，當某個文件被修改時，自動壓縮修改文件。啓動 gulp 後就能夠讓它幫助你自動構建 Web 項目。

gulp.task('auto',function(){
  gulp.watch('js/*.js',['script']);
})

當執行auto命令後，去修改js文件夾下面的myDemo.js，此時控制檯會打印以下信息：表示檢測到文件修改並壓縮文件

[16:42:49] Using gulpfile ~/Documents/mycode/gulpDemo/gulpfile.js
[16:42:49] Starting 'auto'...
[16:42:49] Finished 'auto' after 10 ms
[16:42:55] Starting 'script'...

也能夠使用 gulp.task('default', fn) 定義默認任務

gulp.task('default',['script','auto'])

 

// 獲取 gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify({ mangle: false }))
    // 3. 另存壓縮後的文件
        .pipe(gulp.dest('dist/js'))
})

gulp.task('auto',function(){
   gulp.watch('js/*.js',['script']);
})

 

注意；在安裝gulp和gulp-uglify的時候，須要使用sudo npm install，不然，在執行gulp命令的時候，會報gulp command not found