使用gulp快速开发静态页

前言

现在咱们开发web网页的方式主要有几种，使用vue-cli、create-react-app、webpack、不借助构建工具等实现单页或多页网站。“工欲善其事，必先利其器”，前三种方式无疑能知足咱们开发网页的绝大部分需求，但在某些状况下，好比先后端不分离(jsp、php、tpl等嵌套后端语言的方式)，以及单纯地开发一些静态页(活动页、帮助手册等)，使用gulp搭建一个轻量级的前端开发环境是一个选择。

gulp相对上手简单，有经验的前端也都比较熟悉，这里不打算一步步地介绍gulp开发环境的搭建，而是分享一下实际使用gulp的代码及思路。

实现哪些功能

使用gulp的目的是实现自动化构建，提高开发效率、代码质量，因此有如下一些目标。

1. 压缩html、css、js、图片
2. 编译ES六、less/scss
3. 补全css前缀
4. px转rem
5. 静态资源缓存控制
6. 静态服务器
7. 代码检查

实际上gulp能作到的还有更多，不过出于开发静态页的目的，这里只罗列了一些经常使用功能。

代码

基本目录以下

gulpfile.js主要代码

静态服务器

gulp.task('server', done => {
    connect.server({
        root: 'dist',//根目录
        livereload: true,//自动更新
        port: 9090//端口
    })
    done();
});
复制代码

压缩html

gulp.task('html', function () {
    return gulp.src('src/*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload())
})
复制代码

编译并压缩css

gulp.task('css', done => {
    var processors = [px2rem({ remUnit: 100 })];

    gulp.src('src/less/**/*.less')   //获取全部less文件路径
        .pipe(less())           //执行less
        .pipe(autoprefixer({//补全前缀
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        }))
        .pipe(postcss(processors))//px转rem tips: 若是某个px不转换，可以使用大写代替，相似1PX
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())

    done();
});
复制代码

编译并压缩js

gulp.task('js', function () {
    return gulp.src('src/js/**/*.js')
        //.pipe(jshint())//检查代码
        .pipe(babel({//编译ES6
            presets: ['@babel/env']
        }))
        .pipe(uglify())//压缩js
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload())
})
复制代码

压缩图片

gulp.task('images', function () {
    return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
});
复制代码

监控文件变化

gulp.task('watcher', done => { //监听变化
    gulp.watch('src/*.html', gulp.series('html'));
    gulp.watch('src/less/**/*.less', gulp.series('css'));
    gulp.watch('src/js/**/*.js', gulp.series('js'));
    gulp.watch('src/images/**/*', gulp.series('images'));

    done();
})
复制代码

生成带hash值的文件名及路径

这里还使用了gulp-rev-delete-original删除旧文件。

gulp.task("hash", done => {
    gulp
        .src("dist/**")
        .pipe(
            RevAll.revision({
                dontRenameFile: [/\.html$/]
            })
        )
        .pipe(revdel({
            exclude: function (file) {
                if (/\.html$/.test(file.name)) {
                    return true; //if you want to exclude the file from being deleted
                }
            }
        }))
        .pipe(gulp.dest("dist"))

    done();
});
复制代码

gulp命令

打开本地服务器，以及打包文件。

// 初始化
gulp.task('init', gulp.series('clean', gulp.parallel('html', 'css', 'js', 'images')));
// 开发
gulp.task('default', gulp.series('init', 'server', 'watcher'));
// 打包
gulp.task('build', gulp.series('hash'));
复制代码

能够看出上面的代码比较简单，由于初衷是作一些简单的静态页，因此并无作得比较复杂，监控文件变化编译至dist目录，再由gulp-rev-all生成hash文件名。

先后端不分离的状况

这里须要区分先后端不分离的状况，因为公司的技术不升级，或者须要维护老项目，就要应付先后端不分离的场景。好比页面是jsp、php文件，这时静态页跟实际页面并无直接对应关系，每次gulp打包后，gulp-rev-all会从新生成带hash的文件和路径，而且不支持test.css?v=123这种方式，这样所有手动复制到项目目录并不实际，只能放弃gulp-rev-all(build)，而且移除代码压缩。

值得一提的是，先后端不分离能够用后端语言进行资源的缓存控制，例如使用php读取文件的修改日期来作版本号。

function autoVersion($file) {  
    if( file_exists($_SERVER['DOCUMENT_ROOT'].$file) ) {  
        $ver = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);  
    } else {  
        $ver = 1;  
    }  
    return $file .'?v=' .$ver;  
}  
复制代码

<link rel="stylesheet" href="<?= autoVersion('xxx/css/main.css')?>"> <!-- main.css?v=13579 -->
复制代码

此外，应对先后端不分离应该还有一种解决方案，借助构建工具直接生成后端所需的模板文件(如index.tpl)，这里暂不讨论。

最后

这些是根据工做经验总结出来的，虽然当下使用或基于webpack开发单页是主流，但在某些覆盖不到的场景下进行一些梳理仍是有必要的。

源码地址：gulp-util，另外附上一个webpack多页脚手架webpack-multiple-entry，这是做者fork别人的项目来修改的，比较简单实用，感兴趣的小伙伴能够参考下。