使用gulp压缩js详细步骤笔记

先要安装nodejs，初始化项目配置文件package.json，根据情况输入配置参数

npm init

test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\temp\20170429\test03\package.json:

{
  "name": "test03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

 

安装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

 监控文件修改自动执行任务

gulp.task("file_change",function()
    {
       gulp.src("src/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"));
        console.log("uglifyed");
    })


    gulp.task("auto",function()
    {
        gulp.watch("src/*.js",["file_change"]);
    })

执行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