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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트기타관련 기사를 주목하세요!

관련 읽기:

360 속도 모드가 기본적으로 켜지도록 설정하는 방법

Vue Es6을 Es5 구문으로 구문 분석하는 방법

위 내용은 gulp를 사용하여 requireJS 프로젝트를 자동으로 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!