gulp 4 前后端不分离模板(切图仔的最爱)

前后端不分离的多页应用, 而且前端只是负责做静态页面

本脚手架基于gulp 4, 主要功能包括:

less以及css的处理: less转css, autoprefix
html处理: gulp-file-include模板, 对应后端jsp的include语法
img压缩
热启动
js语法检查(因为我是切图仔, 写的js是基本效果,不能压缩代码, 以方便后端同事查看源码)
引入es6

重点分析

热启动

为了能像webpac打包单页应用一样, 修改任何资源页面热加载, 即时展现出修改。在多页应用中，要监控不特定的页面的不特定资源修改，就需要对所有资源进行监控。当然，我们为了节约性能，可以对正在开发的页面进行监控或者对常常修改的内容，进行监控。

gulp.task('watch', cb => {
    // 在下面的任务js、less、html中，都会执行文件的预处理以及页面的热启动
    gulp.watch('./js/*.js', gulp.series('js'));

    gulp.watch('./css/*.less', gulp.series('less'));

    gulp.watch('./img/**.*', gulp.series('img'));
    gulp.watch(['./page/*.html', './html_template/*.html'], gulp.series('html'));
    cb();
});

gulp.task('img', () => {
    return gulp.src(['./img/**.*'])
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
        .pipe(gulp.dest('./dist/img/'))
        .pipe(
            reload({
                stream: true
            })
        );
});

html模板

采用 gulp-file-include模仿最常见的的模板格式 , 这样的话, 后端的java开发者也能很容易看出来, 直接转换成jsp的include指令,在配置文件中的配置如下:

gulp.task('html', () => {
    return gulp.src(['./page/*.html'])
        .pipe(
            fileinclude({
                prefix: '<!--@',
                suffix: '-->',
                basepath: './html_template'
            })
        )
        .pipe(gulp.dest('./dist/page/'))
        .pipe(
            reload({
                stream: true
            })
        );
});

es6

采用es6编码已经非常流行了, 但是在关于es6 babel的配置却一直变化, 一会儿找不到包babel-preset-env, 一会儿又是babel-core异常。出现问题，主要是因为es6转码的babel一直在变化，出现了版本间不兼容的问题。

package.json中相关的包:

 "gulp-babel": "^8.0.0",
 "@babel/core": "^7.4.4",
 "@babel/preset-env": "^7.4.4",

.babelrc中的配置如下:

 {
     "presets": ["@babel/preset-env"]
 }

gulpfile.babel.js中应该这样配置:

 gulp.task('js', cb => {
     return (
         gulp.src(['./js/*.js'])
             // .pipe(uglify())
             .pipe(eslint())
             .pipe(babel({
                 presets: ['@babel/preset-env']
             }))
             .pipe(gulp.dest('./dist/js/'))
             .pipe(
                 reload({
                     stream: true
                 })
             )
     );
 });

运行

命令行运行gulp, 输入页面路径 http://localhost:3000/page/about.html

TODO

~~压缩与不压缩; 检查~~
细节, 比如min文件不压缩, lib库(包含img css js)的处理
性能优化

SpeechlessCode/gulp4-demos

gulp 4 前后端不分离模板(切图仔的最爱)

本脚手架基于gulp 4, 主要功能包括:

重点分析

运行

TODO

github地址