使用gulp自动优化requireJS项目
2015-03-20 15:43
162 查看
引言
前端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 压缩图片等等,官方上有无数插件可以使用,极大的方便了前端开发。相关文章推荐
- 使用gulp为项目中的文件自动添加版本号之实践思路
- 详解如何使用gulp实现项目在浏览器中的自动刷新
- eclipse下开发java项目 -- 前端开发想使用 sublime怎么办?(借助gulp自动发布)
- Maven JavaWEB项目使用Gulp自动构建js和css实现代码压缩、版本后缀
- Android项目使用Ant打包,自动生成build.xml
- 使用NUGet自动下载(还原)项目中使用的包
- Android使用ant对项目进行编译签名优化打包
- Android使用ant对项目进行编译签名优化打包
- 自动备份和SQL优化及PCANYWHERE使用手册
- 解决thinkphp配置中,项目目录不可写,目录无法自动生成! 请使用项目生成器或者手动生成项目目录~问题
- 使用rebar构建工程、执行单元测试、自动生成项目文档
- oracle优化,hint的使用! (系统自动优化有时不是最好的,我们可以手动添加hint来提高查询效率
- Android 项目中使用 的 优化建议
- 使用RequireJS优化Web应用前端
- 使用RequireJS优化Web应用前端
- 使用Adobe Scout性能分析工具优化flash项目
- 使用ANT+SVN在Linux上实现自动部署项目
- 使用Delphi 7 编写一个IE右键菜单项目:自动保存图片
- android项目中使用aidl时,无法自动生成java档的问题
- (转)Android使用ant对项目进行编译签名优化打包