使用gulp构建项目，sass/less编译，js/css/html/image压缩，版本号处理

gulp是一个基于任务的工具

以下配置能实现的功能

scss编译

js/css/html压缩

html引入静态资源版本号处理(缓存处理)

插件js以copy形式加入到打包项目中

项目文件改动任意处浏览器刷新

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));//将scss编译成css
const browserSync = require('browser-sync');//微型服务，当资源改动时，浏览器会自动刷新
const minifycss = require('gulp-minify-css');//css压缩插件
const uglify = require('gulp-uglify');//js压缩插件
const changed = require('gulp-changed');//只编译更改过的文件
const htmlmin = require('gulp-htmlmin');//压缩html文件
const del = require('del');//删除文件
const revFormat = require('gulp-rev-format');//xx.css格式化成xx.8ac2s2jz.cache.css形式
const rev = require('gulp-rev-dxb');//生成需要版本替换的静态资源清单
const revCollector = require('gulp-rev-collector-dxb');//将生成好的静态资源清单替换到html文件中

/***************编译SCSS***********************/
gulp.task("sass",(done)=>{
    gulp.src("src/assets/scss/*.scss")
        .pipe(sass())
        .pipe(minifycss())
        .pipe(gulp.dest("dist/static/css"))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************编译CSS***********************/
gulp.task('css',(done)=>{
    gulp.src("src/assets/css/*/*.css")
        .pipe(minifycss())
        .pipe(changed("dist/static/css"))
        .pipe(gulp.dest("dist/static/css"))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************编译图片***********************/
gulp.task('image',(done)=>{
    gulp.src("src/assets/images/**")
        .pipe(gulp.dest("dist/static/images"))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************编译JS***********************/
gulp.task("js",(done)=>{
    gulp.src(["src/assets/js/*.js","!src/assets/js/tools.js"])
        .pipe(uglify({ mangle: { toplevel: true }}))
        .pipe(changed("dist/static/js"))
        .pipe(gulp.dest('dist/static/js'))
        .pipe(gulp.src(['src/assets/js/tools.js']))
        .pipe(changed("dist/static/js"))
        .pipe(gulp.dest('dist/static/js'))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************编译html***********************/
gulp.task("html",(done)=>{
    gulp.src("src/views/*.html")
        .pipe(changed("dist/views"))
        .pipe(htmlmin({collapseWhitespace:true}))
        .pipe(gulp.dest('dist/views'))
        .pipe(browserSync.reload({
            stream:true
        }))
    gulp.src("popup.html")
        .pipe(changed("dist"))
        .pipe(htmlmin({collapseWhitespace:true}))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************浏览器服务***********************/
gulp.task("browserSync",()=>{
    browserSync({
        server:{
            baseDir:'./dist'
        }
    })
})

/***************copy内容***********************/
gulp.task("copy",(done)=>{
    gulp.src(['manifest.json'])
        .pipe(gulp.dest('dist/'))
        .pipe(gulp.src(['static/**']))
        .pipe(gulp.dest('dist/static'))
        .pipe(browserSync.reload({
            stream:true
        }))
    done();
})

/***************删除文件夹***********************/
gulp.task('clean',(done)=>{
    del(['dist','config'])
    done();
})

/***************生成版本号清单***********************/
gulp.task('rev', function() {
    return gulp.src(['dist/static/**','!dist/static/js/lib/**'])
        .pipe(rev())
        .pipe(revFormat({
            prefix: '.', // 在版本号前增加字符
            suffix: '.cache', // 在版本号后增加字符
            lastExt: false
        }))
        .pipe(rev.manifest())
        .pipe(gulp.dest("config/"));
});


/***************路径替换***********************/
gulp.task('update-version', ()=> {
    return gulp.src(['config/*.json','dist/views/*.html'])
        .pipe(revCollector({
            replaceReved:true,
        }))
        .pipe(gulp.dest('dist/views'));
});

/***************生成版本清单及静态资源路径路径***********************/
gulp.task('rev-update-version',gulp.series('rev',gulp.parallel('update-version')))

/**
 * 执行watch之前需要全量打包编译一下，npm run build
 * 因为服务器运行的是dist已编译完的文件
 * */
gulp.task("watch",(done)=>{
    gulp.series('browserSync',()=>{})();
    gulp.watch('src/assets/css/**',gulp.series(['css']))
    gulp.watch('src/assets/sass/**',gulp.series(['sass']))
    gulp.watch('src/assets/js/**',gulp.series(['js']))
    gulp.watch('src/views/**',gulp.series(['html']))
    gulp.watch(['static/**','manifest.json'],gulp.series(['copy']))
    done();
})

/**
 * 打包编译
 *
 * */
gulp.task("default",gulp.series(['sass','css','js','copy','image','html']))

package.json

{
  "name": "gulp-demo",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gulp",
    "start": "gulp watch",
    "update-version": "gulp rev-update-version"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.7",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-changed": "^4.0.3",
    "gulp-htmlmin": "^5.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^2.0.0",
    "gulp-rev-collector-dxb": "^1.3.2",
    "gulp-rev-dxb": "^9.0.1",
    "gulp-rev-format": "^1.0.5",
    "gulp-sass": "^5.0.0",
    "gulp-uglify": "^3.0.2",
    "sass": "^1.43.4"
  }
}

npm run build 项目编译

npm run strat 项目进入开发模式

npm run update-version 静态资源更新缓存

源码目录与编译后的文件目录对比