保捱科技网
您的当前位置:首页怎样使用gulp自动优化requireJS的项目

怎样使用gulp自动优化requireJS的项目

来源:保捱科技网


这次给大家带来怎样使用gulp自动优化requireJS的项目,使用gulp自动优化requireJS的项目的注意事项有哪些,下面就是实战案例,一起来看一下。

{ 
 "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" 
 }, 
}

gulpfile.js文件

//引入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'); }); });

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

怎样设置默认打开360极速模式

怎样让Vue Es6解析为Es5语法

显示全文