使用gulp自动优化requireJS项目

引言

前端javascript文件越来越多了，依赖加载，文件合并的问题也就随之出现。好在有基于AMD规范的requirejs和国产基于CMD规范的seajs可以管理依赖。但是，使用这样的js来管理js模块的依赖，就会导致页面js文件请求就会变多，为了减少文件请求，一般的文件拼合工具就不起作用了，比如grunt的concat工具。

好在requirejs有r.js来解决这个问题。而且使用也简单，容易上手。这篇文章，就是让gulp来自动使用r.js合并优化requireJS项目

在开始之前，我们假定你已经掌握了requirejs的使用，若是不懂，可以看看阮一峰老师的相关文章，写得很好。另外，你需要有node环境和git，那么这些条件都准备充足了，神马都好办了。

开始之前

在开始之前，我们假定你已经掌握了 requirejs以及gulp 的使用，若是不懂，可以看看阮一峰老师的 相关文章 ，写得很好。另外，你需要有 node 环境和 git ，那么这些条件都准备充足了，神马都好办了。

正文

a.准备

编写packejson文件，引入以下依赖

{
  "name": "gulp-requireDemo",
  "version": "0.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "feier",
  "license": "ISC",
  "dependencies": {
    "amd-optimize": "^0.4.3",                   //关键文件 与gulp与require集成
    "gulp": "^3.8.10",		//gulp主文件
    "gulp-concat": "^2.4.2",   //文件合并
    "gulp-imagemin": "^2.0.0",                  //图片压缩
    "gulp-jshint": "^1.9.0",//js检查
    "gulp-less": "^2.0.1",               //less编译
    "gulp-minify-css": "^0.3.11",//css压缩
    "gulp-rename": "^1.2.0",//重命名
    "gulp-uglify": "^1.0.2",//文件压缩
    "imagemin-pngcrush": "^4.0.0"
  },
  "main": "index.js",
  "directories": {
    "test": "test"
  },
}

b,编写gulp.file文件

//引入gulp
var gulp = require('gulp');


//引入组件
var concat = require('gulp-concat');           //合并
var jshint = require('gulp-jshint');           //js规范验证
var uglify = require('gulp-uglify');           //压缩
var rename = require('gulp-rename');          //文件名命名
var amdOptimize = require("amd-optimize");           //require优化
var watch = require('gulp-watch');




//脚本检查
gulp.task('lint', function () {
    gulp.src('./src/js/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});


//require合并
gulp.task('rjs', function () {
    gulp.src('./src/js/**/*.js')
        .pipe(amdOptimize("main", {

 //require config
            paths: {
                "jquery": "../../libs/jquery/dist/jquery.min",
                "jquery.serializeJSON": "../../libs/jquery.serializeJSON/jquery.serializejson.min",
                "sug": "src/js/suggestion/suggestion",
                "validate": "../util/src/js/util/validate",
                "urlParam": "../util/src/js/util/url.param"
            },
            shim: {
                "jquery.serializeJSON": ['jquery']
            }
        }))
        .pipe(concat("index.js"))           //合并
        .pipe(gulp.dest("dist/js"))          //输出保存
        .pipe(rename("index.min.js"))          //重命名
        .pipe(uglify())                        //压缩
        .pipe(gulp.dest("dist/js"));         //输出保存
});

gulp.task('default', function () {
    //监听js变化
    gulp.watch('./src/js/**/*.js', function () {       //当js文件变化后，自动检验 压缩
        //gulp.run('lint', 'scripts');
        gulp.run('lint', 'rjs');
    });


});

c.执行

现在，可以利用控制台等终端命令进入到 gulpfile.js目录下 执行gulp 命令,  当我们改变任何js文件时，gulp都会自动利用rjs 帮我们合并压缩，。

总结

利用gulp,我们可以让系统自动的给我们处理我们想要的功能，除此之外，还可以编译scss less 压缩图片等等，官方上有无数插件可以使用，极大的方便了前端开发。