Gulpjs提供了一种类似流水线的工作模式，结合内置、第三方插件或者自定义的字符串处理功能，能够高效处理各类文件的转换、注入工作。以下对前端的几个常用要素进行介绍。

Html

// html
var injectPartials = require('gulp-inject-partials');
var inject = require('gulp-inject');
const htmlmin = require('gulp-htmlmin');

通过inject可以将业务的多个组成部分分开到不同文件，构建时，将其组合在一起。例如将顶部、底部、左边定义为三个文件，通过inject将这三部分注入到需要的页面。

然后分别在_header.html，_sidebar.html，_footer.html实现。通过如下gulpjs代码就可以组合起来。

// html
var injectPartials = require('gulp-inject-partials');
var inject = require('gulp-inject');
const htmlmin = require('gulp-htmlmin');

css

可以使用scss来编写css。通过如下gulpjs代码编译。

// css 
var sass = require('gulp-sass');



gulp.task('sass', function () {
    return gulp.src('src/scss/**/style.scss')
        //.pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'expanded', sourceMap: false}).on('error', sass.logError))
        //.pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest(distDir+'css'))
        .pipe(browserSync.stream());
});

js

使用typescript来编写js，可以使用如下gulpjs来管理。

// js
const terser = require('gulp-terser');
const ts = require('gulp-typescript');


// TypeScript 编译任务
const tsProject = ts.createProject('tsconfig.json'); 

gulp.task('typescript', function() {
    return gulp.src('src/ts/**/*.ts')
        .pipe(tsProject())
        .pipe(terser()) 
        .pipe(rename({ suffix: '.min' })) // 添加 .min 后缀
        .pipe(gulp.dest(distDir+'js/'));
});

参考资料：

1. 官网 https://gulpjs.com/
2. https://gitee.com/wapuboy/gulpjs-study.git