用gulp-requirejs-optimize优化压缩js

Posted on

优化前：
Alt text

(不仅丑，而且加载速度较慢）
优化后的结果：
Alt text
1.首先确保你的网站使用requirejs去模块化地管理js依赖

2.假如你已经装好了node.js，接下来我们需要安装gulp、uglify、gulp-requirejs-optimize、gulp-concat

1
2
3
4
$npm install gulp
$npm install uglify
$npm install gulp-requirejs-optimize
$npm install gulp-concat

以下是我的requirejs配置文件(main.js):
Alt text
3.然后在你的gulp中，添加一个gulp任务，执行它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var gulp = require("gulp");
var uglify = require("gulp-uglify");
var requirejsOptimize = require('gulp-requirejs-optimize');
var concat = require('gulp-concat');

gulp.task(“js-optimizert", function () {
        return gulp.src(‘你的requirejs的配置文件')
        .pipe(requirejsOptimize(function() {
                //requirejsOptimize会根据你的配置文件去找到所有依赖的js文件
                return {
                    mainConfigFile:
                    '你的requirejs的配置文件'
                };
        }))  
        .pipe(uglify())  //使用uglifyjs去压缩你的js
        .pipe(concat("main-built.js”))  //将其合并为main-built.js
        .pipe(gulp.dest("目的地址"));
});

4.最终只需要加载压缩后的main-built.js就可以代替之前requirejs管理的所有依赖的js文件，是不是很棒？