如何prepare发行版本SystemJS和咕嘟咕嘟？ [英] How to prepare release version with SystemJS and Gulp?
本文介绍了如何prepare发行版本SystemJS和咕嘟咕嘟？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用SystemJS在我Angular2项目。我使用的打字稿tsconfig文件。我想用一饮而尽到Concat的，然后再缩小我的code生产版本。我有concating的code一个问题：每次我试图Concat的文件，我得到的是'角'没有定义或'系统'没有定义。我想修改我尝试从节点模块加载我的文件的顺序，但是我没有成功。
我想知道如果你们任何人有这个问题，并找到答案呢？
下面是我一饮而尽文件：
VAR一饮而尽=要求（'吞掉'），
.....
VAR路径= {
距：'DIST'，
供应商：{
JS：
node_modules / systemjs /距离/ system.src.js'，
node_modules / angular2 /包/ angular2.dev.js'，
node_modules / angular2 /包/ angular2-polyfills.js'，
node_modules / angular2 /包/ router.dev.js
...
]
CSS：[]
}，
应用：{
模板：
应用程序/ ** / *。HTML，
'！node_modules / *。HTML
]
脚本：
应用程序/ ** / *。TS'，
应用程序/ config.ts'，
应用程序/ app.ts
]
}
};VAR tsProject = ts.createProject（'tsconfig.json'，{
出：Whatever.js
}）;gulp.task（'开发：构建：模板'，函数（）{
返回gulp.src（paths.app.templates）
.pipe（ngHtml2Js（{
MODULENAME：'不管'，
declareModule：假的
}））
.pipe（CONCAT（Whatever.tpls.min.js））
.pipe（gulp.dest（paths.dist））;
}）;
gulp.task（'PROD：建筑：模板'，函数（）{
返回gulp.src（paths.app.templates）
.pipe（minifyHtml（{
空：真，
饶：真实，
报价：真
}））
.pipe（ngHtml2Js（{
MODULENAME：'不管'，
declareModule：假的
}））
.pipe（CONCAT（paths.appName +.tpls.min.js））
.pipe（丑化（））
.pipe（gulp.dest（paths.dist））;
}）;gulp.task（'开发：构建：脚本'，函数（）{
VAR tsResult = tsProject.src（）
.pipe（sourcemaps.init（））
.pipe（TS（tsProject））; 返回tsResult.js
.pipe（sourcemaps.write（{
sourceRoot：/应用程序
}））
.pipe（CONCAT（'whatever.js'））
.pipe（gulp.dest（paths.dist））;
}）;gulp.task（'开发：构建：风格'，函数（）{
返回gulp.src（paths.app.styles）
.pipe（SASS（））
.pipe（gulp.dest（paths.dist +'/ CSS'））;
}）;
gulp.task（'开发：构建：供应商'，函数（）{
返回gulp.src（paths.vendor.js）
.pipe（CONCAT（'vendor.min.js'））
.pipe（gulp.dest（paths.dist））
}）;gulp.task（'开发：编译，[
开发：构建：供应商'，
开发：构建：模板'，
开发：构建：脚本'，
开发：构建：风格'，
]功能（）{
}）;
这是我怎么加载我的文件：
＆LT;脚本SRC =vendor.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =Whatever.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =Whatever.tpls.min.js＆GT;＆下; /脚本＆GT;
这是我收到erors：
未捕获类型错误：意外的匿名电话System.register（匿名函数）@ vendor.min.js：2680load.metadata.format @ vendor.min.js：3220oldModule @ vendor.min .js文件：3749（匿名函数）@ vendor.min.js：2411SystemJSLoader.register @ vendor.min.js：2636（匿名函数）@ Whatever.js：2
Whatever.tpls.min.js：1未捕获的ReferenceError：角没有定义
解决方案
您会得到意外的匿名电话System.register，因为引用不会被加载正确的顺序。我用JSPM正确建立我的生产角度应用。有4份的过程。
第1部分：编译打字稿文件
\r
\r\r
\r VAR TS =要求（一饮而尽，打字稿）;\r
VAR tsProject = ts.createProject（./应用/ tsconfig.json）;\r
gulp.task（编译：TS功能（）{\r
VAR tsResult = tsProject.src（）\r
.pipe（TS（tsProject））;\r
tsResult.js.pipe（gulp.dest（./ wwwroot文件/程序））;\r
\r
}）; \r
2部分：配置config.js（告诉JSPM如何捆绑您的应用程序）：
\r
\r\r
\r System.config（{\r
BASEURL：/，\r
defaultJSExtensions：真实，\r
transpiler：打字稿\r
路径：{\r
故宫：*：jspm_packages / NPM / *，\r
github上：*：jspm_packages / github上/ *，\r
node_modules *：node_modules / *\r
}，\r
\r
包：{\r
应用程序：{\r
defaultExtension：JS\r
}\r
}，\r
\r
图：{\r
angular2：node_modules / angular2，\r
引导：github上：twbs/bootstrap@3.3.6\r
jQuery的：github上：components/jquery@2.1.4\r
rxjs：node_modules / rxjs，\r
TS：github上：frankwallis/plugin-typescript@2.4.3\r
打字稿：故宫：typescript@1.7.5\r
github上：frankwallis/plugin-typescript@2.4.3：{\r
打字稿：故宫：typescript@1.7.5\r
}，\r
github上：twbs/bootstrap@3.3.6：{\r
jQuery的：github上：components/jquery@2.1.4\r
}\r
}\r
}）; \r
3部分：使用一饮而尽，JSPM捆绑您的应用
\r
\r\r
\r VAR gulp_jspm =要求（一饮而尽-JSPM）;\r
gulp.task（jspm_bundle，[编译：TS]，函数（）{\r
返回gulp.src（./ wwwroot文件/程序/ boot.js）\r
.pipe（gulp_jspm（{selfExecutingBundle：真}））\r
.pipe（gulp.dest（./ wwwroot文件/程序/））;\r
\r
}）;\r
//这将创建一个名为boot.bundle.js\r
//注意我设置JSPM创建一个自动执行捆绑 \r
4：现在再压缩和Concat的所有资产：
\r
\r\r
\r gulp.task（分：JS，[jspm_bundle]，功能（）{\r
VAR filesArry = [\r
./wwwroot/lib/anguar2/angular2-polyfills.js\r
./wwwroot/lib/anguar2/es6-shim.js\r
./wwwroot/app/boot.bundle.js\r
！./ wwwroot文件/程序/ boot.bundle.min.js\r
];\r
返回gulp.src（filesArry）\r
.pipe（CONCAT（concatApp.js））\r
.pipe（gulp.dest（./ wwwroot文件/ JS-TEMP））\r
.pipe（重命名（boot.bundle.min.js））\r
.pipe（丑化（））\r
.pipe（gulp.dest（./ wwwroot文件/程序的构建））;\r
}）; \r
最后，把一只漂亮整洁的脚本引用到你的index.html：
\r
\r其中一个这种方法的很好的特性是你捆绑的应用程序将只包含在你实际引用的资产导入语句（JSPM不会捆绑它，如果你不需要它）。 \r
\r＆LT;脚本SRC =〜/应用程序的构建/ boot.bundle.min .js文件＆GT; ＆LT; / SCRIPT＆GT; \r
I use SystemJS in my Angular2 project. I use tsconfig file for TypeScript. I want to use gulp to concat and minify my code for production version. I am having an issues with concating the code: each time I try to concat files I get either 'angular' not defined or 'system' not defined. I tried to modify the order that I try to load my files from node modules, however I did not succeeded.
I was wondering if any of you had this issues, and found an answer to it?
Here is my gulp file:
var gulp = require('gulp'),
.....
var paths = {
dist: 'dist',
vendor: {
js: [
'node_modules/systemjs/dist/system.src.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/angular2/bundles/router.dev.js'
...
],
css: []
},
app: {
templates: [
'app/**/*.html',
'!node_modules/*.html'
],
scripts: [
'app/**/*.ts',
'app/config.ts',
'app/app.ts'
]
}
};
var tsProject = ts.createProject('tsconfig.json', {
out: 'Whatever.js'
});
gulp.task('dev:build:templates', function () {
return gulp.src(paths.app.templates)
.pipe(ngHtml2Js({
moduleName: 'Whatever',
declareModule: false
}))
.pipe(concat("Whatever.tpls.min.js"))
.pipe(gulp.dest(paths.dist));
});
gulp.task('prod:build:templates', function () {
return gulp.src(paths.app.templates)
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: 'whatever',
declareModule: false
}))
.pipe(concat(paths.appName + ".tpls.min.js"))
.pipe(uglify())
.pipe(gulp.dest(paths.dist));
});
gulp.task('dev:build:scripts', function () {
var tsResult = tsProject.src()
.pipe(sourcemaps.init())
.pipe(ts(tsProject));
return tsResult.js
.pipe(sourcemaps.write({
sourceRoot: '/app'
}))
.pipe(concat('whatever.js'))
.pipe(gulp.dest(paths.dist));
});
gulp.task('dev:build:styles', function () {
return gulp.src(paths.app.styles)
.pipe(sass())
.pipe(gulp.dest(paths.dist + '/css'));
});
gulp.task('dev:build:vendor', function () {
return gulp.src(paths.vendor.js)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest(paths.dist))
});
gulp.task('dev:build', [
'dev:build:vendor',
'dev:build:templates',
'dev:build:scripts',
'dev:build:styles',
], function () {
});
This is how I load my files:
<script src="vendor.min.js"></script>
<script src="Whatever.js"></script>
<script src="Whatever.tpls.min.js"></script>
And here are the erors that I am getting:
Uncaught TypeError: Unexpected anonymous System.register call.(anonymous function) @ vendor.min.js:2680load.metadata.format @ vendor.min.js:3220oldModule @ vendor.min.js:3749(anonymous function) @ vendor.min.js:2411SystemJSLoader.register @ vendor.min.js:2636(anonymous function) @ Whatever.js:2
Whatever.tpls.min.js:1 Uncaught ReferenceError: angular is not defined
解决方案
You will get " Unexpected anonymous System.register call" because the references are not being loaded in the correct order. I use JSPM to properly build my angular app for production. There are 4 parts to the process.
Part 1: Compile your typescript files
var ts = require("gulp-typescript");
var tsProject = ts.createProject("./App/tsconfig.json");
gulp.task("compile:ts", function () {
var tsResult = tsProject.src()
.pipe(ts(tsProject));
tsResult.js.pipe(gulp.dest("./wwwroot/app"));
});
Part 2: Configure config.js (to tell JSPM how to bundle your app):
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "typescript",
paths: {
"npm:*": "jspm_packages/npm/*",
"github:*": "jspm_packages/github/*",
"node_modules*": "node_modules/*"
},
packages: {
"app": {
"defaultExtension": "js"
}
},
map: {
"angular2": "node_modules/angular2",
"bootstrap": "github:twbs/bootstrap@3.3.6",
"jquery": "github:components/jquery@2.1.4",
"rxjs": "node_modules/rxjs",
"ts": "github:frankwallis/plugin-typescript@2.4.3",
"typescript": "npm:typescript@1.7.5",
"github:frankwallis/plugin-typescript@2.4.3": {
"typescript": "npm:typescript@1.7.5"
},
"github:twbs/bootstrap@3.3.6": {
"jquery": "github:components/jquery@2.1.4"
}
}
});
Part 3: Use gulp-jspm to bundle up your app
var gulp_jspm = require("gulp-jspm");
gulp.task("jspm_bundle", ["compile:ts"], function() {
return gulp.src("./wwwroot/app/boot.js")
.pipe(gulp_jspm({ selfExecutingBundle: true }))
.pipe(gulp.dest("./wwwroot/app/"));
});
//this will create a file called boot.bundle.js
//note I have set jspm to create a self-executing bundle
4: Now minify and concat all your assets:
gulp.task("min:Js",["jspm_bundle"], function() {
var filesArry = [
"./wwwroot/lib/anguar2/angular2-polyfills.js",
"./wwwroot/lib/anguar2/es6-shim.js",
"./wwwroot/app/boot.bundle.js",
"!./wwwroot/app/boot.bundle.min.js"
];
return gulp.src(filesArry)
.pipe(concat("concatApp.js"))
.pipe(gulp.dest("./wwwroot/js-temp"))
.pipe(rename("boot.bundle.min.js"))
.pipe(uglify())
.pipe(gulp.dest("./wwwroot/app-build"));
});
Finally, put one nice tidy script reference into your index.html:
<script src="~/app-build/boot.bundle.min.js"> </script>
One of the nice features of this approach is that your bundled app will only contain the assets that are actually referenced in you import statements (jspm won't bundle it if you don't need it).
这篇关于如何prepare发行版本SystemJS和咕嘟咕嘟？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
