Question

我正在学习如何使用SystemJS Builder 0.15.30捆绑用Angular 2 rc.6编写的typescript 2应用程序。我使用gulp 3.9.1来构建：

我的应用程序中的每个组件都有5个文件：

component.ts
component.html
component.scss
component.css（由下面的gulp任务＃1生成）
component.min.html（由下面的gulp任务＃2生成）

.ts导入要内联使用的.min.html和.css。我的目标是在一步中缩小和捆绑这些，而不是首先生成它们。

我目前有3个gulp任务，我想合并为一个：

1。扫描所有文件夹;将.scss转换为同一目录中的缩小.css

gulp.task('build-css', function () {
    gulp.src(appDev + '**/*.scss', {base: "./"})
        .pipe(postcss([precss, autoprefixer, cssnano]))
        .pipe(ext_replace('.css'))
        .pipe(gulp.dest('./'));
});

2. 扫描所有文件夹;缩小.html并将结果重命名为.min.html

gulp.task('shrink-html',function(){
    return gulp.src(appDev+'**/*.html', {base: "./"})
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(ext_replace('.min.html'))
        .pipe(gulp.dest('./'));
});

我首先运行这些任务。一旦他们分别生成.css和.min.html，我就会运行一个打字稿编译器任务，将.ts转换为.js。

3 最后我运行了SystemJS Builder任务。我使用buildStatic创建一个自执行包：

// build-ts is run before this, to compile typescript into JS
// and move everything out to the production folder (appProd)
gulp.task('bundle',['build-ts'], function() {
    var builder = new Builder('', './systemjs.config.js');

    return builder
        .buildStatic(appProd + '/main.js', appProd + '/bundle.js')
});

我知道必须有一种方法可以在buildStatic()期间缩小，因此我不需要生成所有这些无用的.css和.min.html文件。

我的最大努力：我可以使用the fetch option在处理文件时将其挂钩：

gulp.task('bundle',['build-ts'], function() {
    var builder = new Builder('', './systemjs.config.js');

    return builder
        .buildStatic(appProd + '/main.js', appProd + '/bundle.js', 
        {
            fetch: function (file, fetch) {
                if(file.name.search(/\/app.*\.html$/)!==-1){
                    console.log('html: '+ file.name);
                    //how to manipulate content and return minified HTML string?
                    return fetch(file);
                }else if (file.name.search(/\/app.*\.scss$/)!==-1){
                    console.log('scss: '+ file.name);
                    //how to manipulate content and return minified CSS string?
                    return fetch(file);
                }else{
                    return fetch(file);
                }                
            }
        });
});

我要缩小的文件名打印到控制台，我知道fetch(file)会给我他们的内容，但是如何处理内容并返回缩小的字符串？

PS：Cross-posted on github

SystemJS Builder：在构建期间缩小html和css

0 个答案: