gulp插件解決瀏覽器緩存問題

時間 2019-11-07

原文原文鏈接

1、前言

有些簡單前端小項目，不須要涉及框架，前端打包壓縮的話本妹子仍是喜歡用gulp。本文將用gulp-rev和gulp-rev-rewrite解決cdn緩存問題。以及列出的是本妹子最經常使用的gulp插件，小夥伴們能夠參考。案例地址：github.com/raoenhui/gu…javascript

2、解決瀏覽器緩存問題

gulp-rev

1.爲靜態文件添加惟一hash值，如 unicorn.css → unicorn-d41d8cd98f.css。css

2.生成map映射文件，方便後面html更換文件名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'))
});
複製代碼

替換成功 java

3、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。git

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

找到編譯源文件，方便調試源碼。github

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-concat

合併js文件npm

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預處理器。json

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

壓縮CSSgulp

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

將引用的js、css文件，插入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'))
});
複製代碼