gulp插件处理浏览器缓存题目

一、媒介

有些简朴前端小项目,不需要触及框架,前端打包紧缩的话本妹子照样喜好用gulp
本文将用gulp-revgulp-rev-rewrite处理cdn缓存题目。
以及列出的是本妹子最经常使用的gulp插件,小伙伴们能够参考。
案例地点:https://github.com/raoenhui/g…

二、处理浏览器缓存题目

gulp-rev

1.为静态文件增加唯一hash值,如 unicorn.css → unicorn-d41d8cd98f.css。

2.天生map映照文件,轻易背面html替代文件名

gulp.task('js', () =>
    gulp.src(['./src/app.js', './src/app2.js'])
        .pipe(gulp.dest('dist')) // 将源文件拷贝到打包目次
        .pipe(rev())  
        .pipe(gulp.dest('dist')) // 将天生的hash文件增加到打包目次
        .pipe(rev.manifest('js-rev.json'))
        .pipe(gulp.dest('dist')) // 将map映照文件增加到打包目次
);

gulp.task('css',()=> {
    gulp.src('./src/*.css')
        .pipe(gulp.dest('dist')) // 将天生的hash文件增加到打包目次
        .pipe(rev())
        .pipe(gulp.dest('dist'))// write rev'd assets to build dir
        .pipe(rev.manifest('css-rev.json'))
        .pipe(gulp.dest('dist'))   // 将map映照文件增加到打包目次

});

gulp-rev-rewrite

依据rev天生的manifest.json map映照文件, 去替代html文件中的援用称号,

gulp.task('html', () => {
  const jsManifest = gulp.src('dist/js-rev.json'); //猎取js映照文件
  const cssManifest = gulp.src('dist/css-rev.json'); //猎取css映照文件
  return gulp.src('./*.html')
    .pipe(revRewrite({manifest: jsManifest})) // 把援用的js替代成有版本号的名字
    .pipe(revRewrite({manifest: cssManifest})) // 把援用的css替代成有版本号的名字
    .pipe(gulp.dest('dist'))
});

替代胜利
《gulp插件处理浏览器缓存题目》

三、gulp其他经常使用插件

JS相干

gulp-babel

babel是一个 JavaScript 编译器。我们主如果用将ES6转换成能够在浏览器中运转的代码。而gulp-babel 的用法、功用和babel 是一样的。
先运转 npm install –save-dev gulp-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime,装好babel

const babel = require('gulp-babel');
gulp.task('js', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env'], 
            plugins: ['@babel/transform-runtime']
        }))
        .pipe(gulp.dest('dist'))
);

gulp-sourcemaps

找到编译源文件,轻易调试源码。

const sourcemaps = require('gulp-sourcemaps');
gulp.task('js', () =>
    gulp.src('src/app.js')
    .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env'], 
            plugins: ['@babel/transform-runtime']
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'))
);

《gulp插件处理浏览器缓存题目》

gulp-concat

兼并js文件

const concat = require('gulp-concat');
gulp.task('js', function() {
  return gulp.src(['./src/app.js', './src/app2.js'])
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dist'));
});             

CSS相干

gulp-postcss

CSS预处理器。

const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer'); //增加css兼容性写法
gulp.task('css', function () {
    return gulp.src('./src/*.css')
        .pipe(postcss([ autoprefixer({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', 
                'iOS >= 8',
                'Android > 4.4'
            ],
            flexbox: 'no-2009',
        }) ]))
        .pipe(gulp.dest('./dest'));
});

gulp-clean-css

紧缩CSS

const cleanCSS = require('gulp-clean-css');
gulp.task('css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist'));
});

HTML相干

gulp-inline-source

将援用的jscss文件,插进去html中,变成内联式援用。

const inlinesource = require('gulp-inline-source');
gulp.task('html', function () {
    return gulp.src('./*.html')
        .pipe(inlinesource({
           compress: false     //是不是紧缩成一行,默以为true紧缩
         }))
        .pipe(gulp.dest('./out'));
});

gulp-htmlmin

紧缩html

const htmlmin = require('gulp-htmlmin');
gulp.task('minify', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
                removeComments: true,  //去除备注
                collapseWhitespace: true //去除空缺
              }))
    .pipe(gulp.dest('dist'));
});    

其他

del

删除文件或文件夹

const del = require('del');
/* 清算一些不是必需的js,css文件 */
gulp.task('clean', function() {
    return del(['./dist/*.js',
        './dist/*.css'
    ]).then(function() {
        console.log('delete unnecessary files for firecrackers');
    });
});

gulp-rename

重命名文件

const rename = require('gulp-rename');
gulp.task('html', function() {
.pipe(rename({
    dirname: ".",                // 路径名
    basename: "index",            // 主文件名
    prefix: "pre-",                 // 前缀
    suffix: "-min",                 // 后缀
    extname: ".html"                // 扩展名
  }))
.pipe(gulp.dest('dist'))
});

其他链接

Happy coding .. :)

    原文作者:前端妹子
    原文地址: https://segmentfault.com/a/1190000018732290
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞