美文网首页
最新 完整 gulp之自动化静态资源压缩合并加版本号

最新 完整 gulp之自动化静态资源压缩合并加版本号

作者: 周大侠啊_ | 来源:发表于2018-03-30 13:25 被阅读0次

最新 完整 gulp之自动化静态资源压缩合并加版本号

这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。

先把下面这里插件 npm i (插件名) -D 安装到项目环境内

  • gulp-sequence //顺序执行任务
  • gulp-csso //css压缩
  • gulp-jshint //js检查
  • gulp-uglify'), //js压缩
  • gulp-imagemin //压缩图片
  • gulp-htmlmin //压缩html
  • gulp-clean //清空文件夹
  • gulp-rev //更改版本名 md5后缀
  • gulp-autoprefixer //加浏览器前缀
  • gulp-rev-collector //gulp-rev 的插件,用于html模板更改引用路径

目录结构

|- root
|    |-dist  //此目录为下面生成的
|         |-css
|         |-js
|         |-images
|         |-rev
|         |-index.html
|    |-node_modules
|    |-src   //资源目录
|         |-css
|         |-js
|         |-images
|         index.html
|     gulpfile.js
|     package.json

gulpfile.js文件

var gulp = require('gulp'),
    gulpSequence = require('gulp-sequence'),    //同步执行任务
    csso = require('gulp-csso'),    //css压缩
    jshint = require('gulp-jshint'),    //js检查
    uglify = require('gulp-uglify'),    //js压缩 
    imageMin = require('gulp-imagemin'),    //压缩图片
    htmlMin = require('gulp-htmlmin'),   //压缩html
    clean = require('gulp-clean'),    //清空文件夹
    rev = require('gulp-rev'),    //更改版本名 md5后缀
    autoFx = require('gulp-autoprefixer'),    //加浏览器前缀
     revCollector = require('gulp-rev-collector');    //gulp-rev 的插件,用于html模板更改引用路径

//清空文件夹
gulp.task('clean', function(){
    return gulp.src('dist', {read:false})
               .pipe(clean());
});

//压缩css/加浏览器前缀
gulp.task('css', function(){
    return gulp.src('src/css/*.css')
        .pipe(autoFx({
            browsers: ['last 2 versions', 'Android >= 4.0']
        }))
        .pipe(csso())
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/css'));
});

//压缩js
gulp.task('js', function(){
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(rev())
         .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/rev/js'));
});

//压缩image
gulp.task('image', function(){
    return gulp.src('src/images/*.{png,jpg,gif,ico}')
               .pipe(imageMin({
                    optimizationLevel: 5,
                    progressive: true,
                    interlaced: true,
                    multipass: true
               }))
               .pipe(rev())
               .pipe(gulp.dest('dist/images'))
               .pipe(rev.manifest())
               .pipe(gulp.dest('dist/rev/images'));
});

//改变css引用路径
gulp.task('revCss',function(){
    return gulp.src(['dist/rev/**/*.json','dist/css/*.css'])
               .pipe(revCollector({
                    replaceReved: true
           }))
               .pipe(gulp.dest('dist/css'));
});

//改变html引用路径
gulp.task('rev', function(){
    return gulp.src(['dist/rev/**/*.json','src/*.html'])
               .pipe(revCollector({
                    replaceReved: true
               }))
               .pipe(htmlMin())
               .pipe(gulp.dest('dist/'));
});

gulp.task('default', gulpSequence('clean', 'css', 'js', 'image', 'revCss', 'rev'));    //按顺序执行任务

ok! 有问题,不懂的,错误,请大家积极留言!

相关文章

  • 最新 完整 gulp之自动化静态资源压缩合并加版本号

    最新 完整 gulp之自动化静态资源压缩合并加版本号 这个方案主要是为了实现js/css/image的压缩合并、自...

  • 前端自动化工具|gulp新手入门

    gulp是前端自动化工具,它可以进行html压缩、css压缩合并、js检查压缩、图片压缩、编译less、编译...

  • 1,node.js

    自动化构建工具 gulp webpack grunt gulp--构建项目,压缩合并处理,依赖于 gulpf...

  • Gulp总结

    # gulp 前端自动化构建工具,可以进行文本合并,文件拷贝,js压缩,css压缩,图片压缩等。 ### 入门 1...

  • 页面性能优化

    加载资源优化 1,静态资源的压缩合并,减少HTTP请求 资源的合并,可以减少http请求数量。资源的压缩,可以减少...

  • Gulp总结

    gulp 前端自动化构建工具,可以进行文本合并,文件拷贝,js压缩,css压缩,图片压缩等。 入门 全局安装 gu...

  • gulp详解一

    gulp简介 gulp,是基于nodejs的前端自动化构建工具,用于压缩项目文件,合并文件,部署等,简言之,就是解...

  • gulp-css压缩

    gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是一个基于流的构建工具,可...

  • Hexo静态资源压缩

    静态资源压缩可以优化网页的访问速度、提高用户体验 安装gulp 在站点目录下 或者 安装gulp插件 创建gulp...

  • 面试汇总浏览器相关知识点

    前端性能优化方案? 减少页面体积,提升网络加载 静态资源的压缩合并(JS 代码压缩合并、CSS 代码压缩合并、雪碧...

网友评论

      本文标题:最新 完整 gulp之自动化静态资源压缩合并加版本号

      本文链接:https://www.haomeiwen.com/subject/sqqicftx.html