Gulp. Compile typescript and minify js
In the final Gulp tutorial we’ll consider decisions for compile typescript and minify javascript.
We’ll use gulp-typescript to compile typescript. For minify final javascript we’ll use gulp-uglify plugin.
Besides it’s important to note about two gulp core methods, which define gulp task flow running – series and parallel. Both methods accept tasks, which must complete. But series method runs tasks in turn. If one of taska fails, next tasks won’t be execute. Parallel method will execute tasks all together.
Code lesson (gulpfile.js)
const {src, dest, series, watch} = require('gulp');
const sass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
sass.compiler = require('node-sass');
function compileSass() {
return src('./scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss())
.pipe(dest('./css'));
}
function compileTs() {
return src('./ts/**/*.ts')
.pipe(ts())
.pipe(uglify())
.pipe(dest('./js'));
}
exports.default = function () {
watch(['scss/**/*.scss', './ts/**/*.ts'], series(compileSass, compileTs));
}
0 Comments