玩转JS系列之代码加载篇

<script type="text/javascript">
function a(){
console.log('a init');
}
function b(){

console.log('b init');
a();

}
</script>

<script src="a.js" type="text/javascript" charset="utf-8"></script>

<script src="b.js" type="text/javascript" charset="utf-8"></script>

<script src="require.js" defer async data-main="main.js" type="text/javascript" charset="utf-8"></script>

requirejs.config({
baseUrl: 'js/' //模块文件所在位置
});
require(['b'],function(b){
b.init();
});

define(function(){
return {
init:function(){
console.log("a init")
}
}
});

define(['a'],function(a){
return {
init:function(){
console.log("b init")
a.init();
}
}
});

npm install -g cnpm --registry=https://registry.npm.taobao.org

//装完之后就可以用cnpm 替代npm 速度飞快cnpm i gulp -g

cnpm i gulp-requirejs-optimize -D//我们用了简写的命令 上面的命令等同于 cnpm install gulp-requirejs-optimize --save-dev 后面的--save-dev意思是把我们装的这个模块加入到Npm的包配置清单里 这个清单是个配置文件叫做 package.json

{
"name": "",
"description": "",
"version": "1.0.0",
"author": "maxiao",
"private": true,
"scripts": {
},
"dependencies": {
},
"devDependencies": {"gulp": "^3.9.1",
"gulp-bom": "^1.0.0","gulp-rename": "^1.2.2",
"gulp-requirejs": "^1.0.0-rc2",
"gulp-requirejs-optimize": "^1.2.0",
"gulp-rev": "^8.0.0",
"gulp-rev-collector": "^1.2.2",
"gulp-sequence": "^0.4.6", }
}

var gulp = require('gulp');// 引入组件
var
minifycss = require('gulp-minify-css'),//css压缩
uglify = require('gulp-uglify'),//js压缩
requirejsOptimize = require('gulp-requirejs-optimize');
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename'),//文件更名
rev = require('gulp-rev'),//给文件名添加版本号
del = require('del'),//删除就版本
bom = require('gulp-bom'),//添加bom防止中文乱码
obfuscate = require('gulp-obfuscate'),
revCollector = require('gulp-rev-collector'),//路径替换
gulpSequence = require('gulp-sequence'), //按顺序执行任务
;//提示信息
var newVersion = function () {
var uuid = require('node-uuid');
return uuid.v1().slice(0, 8)
}
/***************************************************************************************************************JS*/
//清理
gulp.task('clearjs', function (cb) {
return del('dest/livecontent/livecommon/app/*.js', cb);
});gulp.task("requirejs_pipe", function () {
return gulp.src('main.js')
.pipe(requirejsOptimize(function (file) {
return {
name: 'main',
optimize: 'uglify2',
//useStrict: true,
baseUrl: '/', };
}))
.pipe(rev())
.pipe(gulp.dest('dest/'))
.pipe(rev.manifest({
merge: true
}))
.pipe(gulp.dest(''));});
//更改版本号
gulp.task('renamejs', function () {
return gulp.src('main.js')
.pipe(rev())
.pipe(gulp.dest('dest/'))
.pipe(rev.manifest({
merge: true
}))
.pipe(gulp.dest(''));
});
//更改引用
gulp.task('usenewjs', function () {
return gulp.src(['rev-manifest.json', 'index.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector({
replaceReved: true
}))
.pipe(bom())
//- 执行文件内css名的替换
.pipe(gulp.dest('dest/js/'));
});
// 默认任务
gulp.task('default', function () {
gulpSequence('clearjs',
'requirejs_pipe','usenewjs'
)(function (err) {
if (err) console.log(err)
})
// Watch .js files
gulp.watch(['js/*.js'], function () {
gulpSequence('clearjs', 'requirejs_pipe', 'usenewjs')(function (err) {
if (err) console.log(err)
})
});});