gulp-uglify 压缩js

前提：已经安装有安装了node 和npm 环境

安装gulp

假设已经安装了node 和npm （淘宝的cnpm很适合国内使用）。

1、首页全局安装gulp。

1 npm install --global gulp 

2、其次局部安装gulp。（注：局部安装是安装到你项目的根目录，这是很多教程没有清晰表明）

npm install gulp --save-dev

3、在项目根目录下创建一个名为 gulpfile.js 的文件

// 引入 gulp及组件
var gulp = require('gulp');

gulp.task('default',function(){
    gulp.start('minify');
});

//JS处理
gulp.task("minify",function(){

    ... ...
   
})

4、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp <task> <othertask>）

gulp

5、安装压缩组件 gulp-uglify 

npm install  gulp-uglify --save-dev

在上述 gulpfile.js 的文件里，写入：

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

gulp.task('default',function(){
    gulp.start('minify');
});

//JS处理
gulp.task("minify",function(){
    gulp.src(['./static/before/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./dest/after'))
})

运行gulp：

gulp

压缩AngularJS代码的时候，需要添加 ng-annotate 插件：

var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');

gulp.task('default',function(){
    gulp.start('minify');
});

//JS处理
gulp.task("minify",function(){
    gulp.src(['./static/before/*.js'])
        .pipe(ngAnnotate())
        .pipe(ngmin({dynamic: false}))
        .pipe(uglify())
        .pipe(gulp.dest('./dest/after'))
})

还有package.json中需要添加相应的：（即运行：npm install --save-dev gulp-ng-annotate 和 npm install --save-dev gulp-ngmin）

{
  "name": "application-name",
  "version": "0.0.1",
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-jshint": "^2.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.1.0",
    "gulp-ngmin": "^0.3.0",
    "gulp-notify": "^3.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0"
  }
}

合并和压缩JS、CSS文件

压缩JS，CSS文件需要引用如下组件：

gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹

gulp-notify:提示

【关于 gulp中报错 Task 'default' is not in your gulpfile 的解决方式】

在末尾加上一个default任务就可以解决，即在gulpfile,js中添加default方法：

gulp.task('default',function(){
    gulp.start('minify');
});