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

2021-11-26 17:31:19 阅读：198 来源： 互联网

标签：src dist pipe sass less 版本号 js gulp done

gulp是一个基于任务的工具

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"
  }
}

标签：src,dist,pipe,sass,less,版本号,js,gulp,done
来源： https://www.cnblogs.com/yz-blog/p/15608794.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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