html+css+js混合成js的实现

最近开发的时候发现要写html的模板还要写模板对应的css、还要写模板的js。这些东西加起来很多，要占用很多地方。放在页面上占地方，也不一定会每次都用到。分成几个文件还要分心去管理。

如果使用vue的方式吧，整个项目也不能这么轻易的换成别的框架。既然这样，不如我来处理掉他们吧。

处理方式

1.安装gulp，配置任务自动处理对应的文件。这么有一个gulp配置的demo，直接复制改配置就可以自动处理这些任务。github地址
2.下载gulp-mad，这个插件将传入的文件处理成一个整个的js，同时可以支持typescript等其他格式的文件转换。gulp-mad地址
3.配置任务，将需要处理的文件监控起来。
4.启动gulp。
5.小提示：可以将vue的格式化插件用在这个js页面上，效果棒棒的。

const gulp = require('gulp');
const mad = require('gulp-mad');
const ts = require('gulp-typescript');

gulp.task("default", function () {
    gulp.src("expmlate/a.mad")
        .pipe(mad(".ts"))
        .pipe(ts({ module: "amd" }))
        .pipe(gulp.dest('dist'));
});