使用gulp壓縮js詳細步驟筆記

先要安裝nodejs，初始化項目配置文件package.json，根據狀況輸入配置參數

npm init

 1 test command:
 2 git repository:
 3 keywords:
 4 author:
 5 license: (ISC)
 6 About to write to E:\temp\20170429\test03\package.json:
 7 
 8 {
 9   "name": "test03",
10   "version": "1.0.0",
11   "description": "",
12   "main": "index.js",
13   "scripts": {
14     "test": "echo \"Error: no test specified\" && exit 1"
15   },
16   "author": "",
17   "license": "ISC"
18 }

npm init

 

安裝gulp

npm install gulp -g   (global環境)

npm install gulp --save-dev (項目環境)

在項目中install須要的gulp插件，通常只壓縮的話須要npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev更多插件能夠在這個連接中找到 http://gratimax.net/search-gulp-plugins/

 

在項目的根目錄新建gulpfile.js，require須要的module

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

    gulp.task("default",function()
    {
        gulp.src("src/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"));
    })

執行gulp命令進行js壓縮

E:\temp\20170429\test03>gulp
[22:23:05] Using gulpfile E:\temp\20170429\test03\gulpfile.js
[22:23:05] Starting 'default'...
[22:23:05] Finished 'default' after 13 ms

 監控文件修改自動執行任務

 1 gulp.task("file_change",function()
 2     {
 3        gulp.src("src/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"));
 4         console.log("uglifyed");
 5     })
 6 
 7 
 8     gulp.task("auto",function()
 9     {
10         gulp.watch("src/*.js",["file_change"]);
11     })

執行gulp auto，文件修改是自動執行壓縮任務

E:\temp\20170429\test03>gulp auto
[23:35:46] Using gulpfile E:\temp\20170429\test03\gulpfile.js
[23:35:46] Starting 'auto'...
[23:35:46] Finished 'auto' after 13 ms
[23:35:51] Starting 'file_change'...
uglifyed
[23:35:51] Finished 'file_change' after 18 ms
[23:35:53] Starting 'file_change'...
uglifyed
[23:35:53] Finished 'file_change' after 4.75 ms
[23:36:04] Starting 'file_change'...
uglifyed