使用gulp快速开发静态页

前言

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

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

实现哪些功能

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

1. 压缩html、css、js、图片
2. 编译ES6、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