gulp: 前端自动化流程构建工具

gulp优点:易于使用,构建快速,插件高质,易于学习,压缩代码, 压缩图片, 合并文件, 把es6转成es5, 给文件生成hash值.....

gulp官网

创建gulp任务:

gulp.task('任务名称', 任务队列(选填), function(){
     // 任务内容
  })

gulp基本使用:

  1. 全局安装gulp:

$ npm install --global gulp

   2.作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

   3.在项目根目录下创建 gulpfile.js 的文件:

var gulp = require('gulp');

gulp.task('default', function() {  // 将你的默认的任务代码放在这});

   4.运行gulp

$ gulp   //后面不输入默认运行default的任务

$ gulp 任务名称   //想要运行特定的任务

  5.基本使用

gulp.src()    查找文件

gulp.dest()   输出文件

pipe()         下一步

require('gulp')   默认从node_modules 里面进行查找

匹配符

gulp.src('js/*.js')               // * 匹配js文件夹下所有.js格式的文件

gulp.src('js/**/*.js')            // ** 匹配js文件夹的0个或多个子文件夹

gulp.src(['js/*.js','!./js/index.js'])    // ! 匹配除了index.js之外的所有js文件

gulp.src('js/**/{omui,common}.js')        // {} 匹配{}里的文件名

操作文件

del  删除

var del = require('del');

del('dist');                      // 删除整个dist文件夹

gulp-rename 重命名文件

var rename = require("gulp-rename");

gulp.src('index.html')
  .pipe(rename('admin/login.html'))    // 直接修改文件名和路径
  .pipe(gulp.dest('dist')); 
 
gulp.src('index.html')
  .pipe(rename({
    dirname: "text",                // 路径名
    basename: "goodbye",            // 主文件名
    prefix: "pre-",                 // 前缀
    suffix: "-min",                 // 后缀
    extname: ".html"                // 扩展名
  }))
  .pipe(gulp.dest('dist'));

gulp-concat 合并文件

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

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-uglify 压缩js文件(只能压缩ES5)

var uglify = require("gulp-uglify");

gulp.src('style.js')
    .pipe(uglify())              // 直接压缩style.js
    .pipe(gulp.dest('dist'))
    
 gulp.src('style.js')
    .pipe(uglify({
        mangle: true,            // 是否修改变量名,默认为 true
        compress: true,          // 是否完全压缩,默认为 true
        preserveComments: 'all'     // 保留所有注释
    }))
    .pipe(gulp.dest('dist'))

gulp-uglify-es 压缩js文件(可以压缩ES6)

let uglify = require('gulp-uglify-es').default;

gulp.task("uglify", function () {
return gulp.src("lib/bundle.js")
  .pipe(uglify( /* options */ ))
  .pipe(gulp.dest("lib/"));
});

gulp-cosso 压缩css文件

var csso = require('gulp-csso');

gulp.src('css/*.css')
    .pipe(csso())
    .pipe(gulp.dest('dist/css'))

gulp-htmlmin 压缩HTML文件

var htmlmin = require('gulp-htmlmin');

gulp.task('minify', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});

gulp-imagemin 压缩图片

var imagemin = require('gulp-imagemin');

gulp.src('img/*.{jpg,png,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'))

gulp-zip zip压缩文件

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

gulp.src('img/*')
    .pipe(zip('all.zip'))                   // 压缩成all.zip文件
    .pipe(gulp.dest('dist'))

gulp-autoprefixer  自动为css添加浏览器前缀

const autoprefixer = require('gulp-autoprefixer');
gulp.task('autoprefixer', () =>
gulp.src('src/app.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist'))
);

gulp -rev  给静态文件添加hash值

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

gulp.src('css/*.css')
    .pipe(rev())
    .pipe(gulp.dest('dist/css'))

gulp-rev-replace 重写被gulp-rev重命名的文件名

var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');

gulp.src('index.html')
    .pipe(useref())                         // 替换HTML中引用的css和js
    .pipe(rev())                            // 给css,js,html加上hash版本号
    .pipe(revReplace())                     // 把引用的css和js替换成有版本号的名字
    .pipe(gulp.dest('dist'))

gulp-connect 热更新(开个服务器)

var connect = require('gulp-connect');

gulp.task('connect', function() {
connect.server({
root: 'app',  //根目录
port: 8001,  //端口号
livereload: true  //是否开启热更新
});
});

gulp.watch  监视文件,并且可以在文件发生改动时候做一些事情

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});



版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

精彩评论
  • 2019-03-26 09:01:53

    每日来逛逛,还能学到很多东西,发现博主是真的厉害!

  • 2019-03-26 15:38:01

    看不太懂,哈哈哈

Top

分享: