gulp 4 先後端不分離模板(切圖仔的最愛)

時間 2019-11-15

原文原文鏈接

先後端不分離的多頁應用, 並且前端只是負責作靜態頁面javascript

本腳手架基於gulp 4, 主要功能包括:

less以及css的處理: less轉css, autoprefix
html處理: gulp-file-include模板, 對應後端jsp的include語法
img壓縮
熱啓動
js語法檢查(由於我是切圖仔, 寫的js是基本效果,不能壓縮代碼, 以方便後端同事查看源碼)
引入es6

重點分析

熱啓動css

爲了能像webpac打包單頁應用同樣, 修改任何資源頁面熱加載, 即時展示出修改。在多頁應用中，要監控不特定的頁面的不特定資源修改，就須要對全部資源進行監控。固然，咱們爲了節約性能，能夠對正在開發的頁面進行監控或者對經常修改的內容，進行監控。html

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指令,在配置文件中的配置以下:java

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

es6git

採用es6編碼已經很是流行了, 可是在關於es6 babel的配置卻一直變化, 一下子找不到包babel-preset-env, 一下子又是babel-core異常。出現問題，主要是由於es6轉碼的babel一直在變化，出現了版本間不兼容的問題。es6

package.json中相關的包:github

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

.babelrc中的配置以下:web

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

gulpfile.babel.js中應該這樣配置:json

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
                 })
             )
     );
 });