I'm learning how to use SystemJS Builder 0.15.30 to bundle my Angular 2 rc.6 application written in typescript 2. I use gulp 3.9.1 for building:
Each component in my application has 5 files:
- component.ts
- component.html
- component.scss
- component.css (generated by gulp task #1 below)
- component.min.html (generated by gulp task #2 below)
The .ts imports the .min.html and .css to be used inline. My objective is to minify and bundle these in one step, instead of having to generate them first.
I currently have 3 gulp tasks that I'd like to merge into one:
1. Scan all folders; transpile .scss to minified .css in same directory
gulp.task('build-css', function () {
gulp.src(appDev + '**/*.scss', {base: "./"})
.pipe(postcss([precss, autoprefixer, cssnano]))
.pipe(ext_replace('.css'))
.pipe(gulp.dest('./'));
});
2. Scan all folders; minify .html and rename result to .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('./'));
});
I first run these tasks. Once they produce the .css and .min.html respectively, I run a typescript compiler task that turns the .ts to .js.
3 finally I run the SystemJS Builder task. I use buildStatic to create a self-executable bundle:
// 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')
});
I know there must be a way to minify during the buildStatic() so I won't need to generate all these useless .css and .min.html files.
My best effort: I can hook into the files as they are processed, using 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);
}
}
});
});
The file names I want to minify get printed to the console, and I know that fetch(file) will give me their content but how to process the content and return a minified string?
