gulp实用插件

• gulp-rename 重命名

var gulp = require('gulp'); 
var uncss = require('gulp-uncss-sp');
let rename = require('gulp-rename');
 
gulp.task('default', function () { 
    return gulp.src('*.css') //需要进行处理的css
        .pipe(uncss({
            html:['*.html']  //使用css的html文件，可以多个
        }))
        .pipe(rename({
          dirname: "text",                // 路径名
          basename: "goodbye",            // 主文件名  不写就默认
          prefix: "pre-",                 // 前缀
          suffix: "-min",                 // 后缀
          extname: ".html"           
        }))
        .pipe(gulp.dest('./dist'));  //输出目录
});

• delete 清除目录

$_> npm install delete

var { series,src,dest } = require('gulp'); 
var uncss = require('gulp-uncss-sp');
let del = require('delete');
 
function clean(cb) {
    del("dist");
    cb();
}
function uncss(cb) { 
    return src('*.css') //需要进行处理的css
        .pipe(uncss({
            html:['*.html']  //使用css的html文件，可以多个
        }))
        .pipe(dest('./dist'));  //输出目录
}

exports.default = series(clean,uncss);

• gulp-concat 合并文件

let concat = require('gulp-concat');
let gulp = require('gulp');

gulp.task('default',()=>{
  gulp.src('./js/*.js')
    .pipe(concat('all.js'))         // 合并all.js文件
    .pipe(gulp.dest('./dist'));
})

    
  //gulp.src(['./js/demo1.js','./js/demo2.js','./js/demo2.js'])
//    .pipe(concat('all.js'))         // 按照[]里的顺序合并文件
//    .pipe(gulp.dest('./dist'));
    

• gulp-zip

let gulp = require('gulp');
var zip = require('gulp-zip');

gulp.task('default', () => {
    gulp.src('./js/*')
        .pipe(zip('all.zip'))                   // 压缩成all.zip文件
        .pipe(gulp.dest('./dist'))
})

• gulp-useref 替换html中的link script 文件

<!-- html -->
    <!-- build:css /css/all.css -->
    <link rel="stylesheet" href="css/normalize.css"> <!-- 需要实际存在 -->
    <link rel="stylesheet" href="css/main.css">
    <!-- endbuild -->

    <!-- build:js /js/bundle.js -->
    <script src="./js/index.js"></script>
    <script src="./js/module.js"></script>
    <!-- endbuild -->
变成
  <link rel="stylesheet" href="/css/all.css">
  <script src="/js/bundle.js"></script>

// Gulpfile.js
let gulp = require('gulp');
let useref = require('gulp-useref');

gulp.task('default', () => {
    gulp.src('./index.html')
        .pipe(useref())
        .pipe(gulp.dest('./dist'))
})

• gulp-html-replace 替换html中的块

<!-- build:css -->                         
<link rel="stylesheet" href="css/normalize.css"> // 不需要实际存在
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

    <!-- build:js  -->
    <script src="./js/index.js"></script>
    <script src="./js/module.js"></script>
    <!-- endbuild -->

<link rel="stylesheet" href="all.css">
<script src="bundle.js"></script>

// gulpfile.js
let gulp = require('gulp');
let htmlreplace = require('gulp-html-replace');

gulp.task('default', () => {
    gulp.src('./index.html')
        .pipe(htmlreplace({
            'css': 'all.css',
            'js': 'bundle.js'
        }))
        .pipe(gulp.dest('./dist'))
})

• gulp-rev 给文件增加hash值 main.css -> main-342515.css

let gulp = require('gulp');
let rev = require('gulp-rev');

gulp.task('default', () => {
    gulp.src('./css/*.css')
        .pipe(rev())
        .pipe(gulp.dest('./dist/css'))
})