One, foreword

Some simple front-end projects do not need to involve a framework, front-end packaging and compression of the phone girl still prefer to use gulp. This article will use gulp-rev and gulp-rev-rewrite to solve the CDN cache problem. As well as the list of my sister’s most commonly used gulp plug-ins, friends can refer to. Case address: github.com/raoenhui/gu…

Second, solve the browser cache problem

gulp-rev

1. Add a unique hash value to the static file, for example, unicorn-d41d8cd98f.css.

2. Generate a map mapping file so that the HTML file name can be changed

gulp.task('js', () =>
    gulp.src(['./src/app.js'.'./src/app2.js'])
        .pipe(gulp.dest('dist')) // Copy the source file to the package directory
        .pipe(rev())  
        .pipe(gulp.dest('dist')) // Add the generated hash file to the package directory
        .pipe(rev.manifest('js-rev.json'))
        .pipe(gulp.dest('dist')) // Add the map mapping file to the package directory
);

gulp.task('css',()=> {
    gulp.src('./src/*.css')
        .pipe(gulp.dest('dist')) // Add the generated hash file to the package directory
        .pipe(rev())
        .pipe(gulp.dest('dist'))// write rev'd assets to build dir
        .pipe(rev.manifest('css-rev.json'))
        .pipe(gulp.dest('dist'))   // Add the map mapping file to the package directory

});
Copy the code

gulp-rev-rewrite

Replace reference names in HTML files with manifest.json map mapping files generated by Rev.

gulp.task('html', () = > {const jsManifest = gulp.src('dist/js-rev.json'); // Get the js mapping file
  const cssManifest = gulp.src('dist/css-rev.json'); // Get the CSS mapping file
  return gulp.src('./*.html')
    .pipe(revRewrite({manifest: jsManifest})) // Replace the referenced js with a name with a version number
    .pipe(revRewrite({manifest: cssManifest})) // Replace the referenced CSS with a name with a version number
    .pipe(gulp.dest('dist'))});Copy the code

Replace the success

3. Other commonly used plug-ins for gulp

JS related

gulp-babel

Babel is a JavaScript compiler. Our main focus is to convert ES6 into code that runs in a browser. Gulp-babel has the same usage and functions as Babel. Run NPM install –save-dev gulp-babel@babel/core@babel /preset-env @babel/plugin-transform-runtime to preset 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')));Copy the code

gulp-sourcemaps

Find the compile source file for easy debugging of the source code.

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')));Copy the code

gulp-concat

Merging JS files

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'));
});             
Copy the code

CSS related

gulp-postcss

CSS preprocessor.

const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer'); // Add CSS compatibility notation
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'));
});
Copy the code

gulp-clean-css

Compress CSS

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

The HTML related

gulp-inline-source

Insert the referenced JS and CSS files into HTML to make them inline references.

const inlinesource = require('gulp-inline-source');
gulp.task('html'.function () {
    return gulp.src('./*.html')
        .pipe(inlinesource({
           compress: false     // Whether to compress into one line. Default is true
         }))
        .pipe(gulp.dest('./out'));
});
Copy the code

gulp-htmlmin

Compressed HTML

const htmlmin = require('gulp-htmlmin');
gulp.task('minify', () = > {return gulp.src('src/*.html')
    .pipe(htmlmin({
                removeComments: true.// remove remarks
                collapseWhitespace: true // remove whitespace
              }))
    .pipe(gulp.dest('dist'));
});    
Copy the code

other

del

Delete files or folders

const del = require('del');
/* Clean up some unnecessary JS and CSS files */
gulp.task('clean'.function() {
    return del(['./dist/*.js'.'./dist/*.css'
    ]).then(function() {
        console.log('delete unnecessary files for firecrackers');
    });
});
Copy the code

gulp-rename

Rename file

const rename = require('gulp-rename');
gulp.task('html'.function() {
.pipe(rename({
    dirname: "."./ / the path name
    basename: "index".// Main file name
    prefix: "pre-"./ / prefix
    suffix: "-min"./ / the suffix
    extname: ".html"                / / extensions
  }))
.pipe(gulp.dest('dist'))});Copy the code

Other links

  • Case address: github.com/raoenhui/gu…
  • The original address: raoenhui. Making. IO/js / 2019/03 /…

Happy coding .. 🙂