這次為大家帶來怎樣使用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'); }); });
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關讀取:
以上是如何使用gulp自動最佳化requireJS的項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!