image555小屋

welcome my blog

gulp常用插件

By image555

发表于 2017-03-16

gulpfile.js文件 和 package.json文件 在线demo

gulpfile.js文件

var gulp     = require('gulp'),  
    concat   = require('gulp-concat'),//- 多个文件合并为一个；  
    cleanCSS = require('gulp-clean-css'),//- 压缩CSS为一行；  
    ugLify   = require('gulp-uglify'),//压缩js  
    imageMin = require('gulp-imagemin'),//压缩图片  
    pngquant = require('imagemin-pngquant'), // 深度压缩
    tinypng = require('gulp-tinypng-compress'),// tinypng 图片压缩  
    htmlMin  = require('gulp-htmlmin'),//压缩html  
    changed  = require('gulp-changed'),//检查改变状态  
    less     = require('gulp-less')//压缩合并less  
    del      = require('del')  
    browserSync = require("browser-sync").create();//浏览器实时刷新  
  
//删除dist下的所有文件  
gulp.task('delete',function(cb){  
    return del(['dist/*'],cb);  
})  
  
//压缩html  
gulp.task('html', function () {  
    var options = {  
        removeComments: true,//清除HTML注释  
        collapseWhitespace: true,//压缩HTML  
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />  
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />  
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"  
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"  
        minifyJS: true,//压缩页面JS  
        minifyCSS: true//压缩页面CSS  
    };  
    gulp.src('index.html')  
        .pipe(changed('dist', {hasChanged: changed.compareSha1Digest}))  
        .pipe(htmlMin(options))  
        .pipe(gulp.dest('dist'))  
        .pipe(browserSync.reload({stream:true}));  
});  
  
//实时编译less  
gulp.task('less', function () {  
    gulp.src(['src/less/*.less']) //多个文件以数组形式传入  
        .pipe(changed('dist/css', {hasChanged: changed.compareSha1Digest}))  
        .pipe(less())  
        .pipe(concat('main.css'))  
        .pipe(cleanCSS())  
        .pipe(gulp.dest('dist/css'))//将会在css下生成main.css  
        .pipe(browserSync.reload({stream:true}));  
});

//压缩合并css,拷贝到目标目录
gulp.task('css', function () {
    gulp.src(['src/css/base.css', 'src/css/index.css'])
        .pipe(concat('app.min.css'))
        .pipe(cssmin())
        .pipe(gulp.dest('dist/pkg'))
        .pipe(browserSync.reload({stream:true})); 
});  
  
//压缩js  
gulp.task("script",function(){  
    gulp.src([ 'src/js/index.js'])  
        .pipe(changed('dist/js', {hasChanged: changed.compareSha1Digest}))  
        .pipe(concat('index.js'))  
        .pipe(ugLify())  
        .pipe(gulp.dest('dist/js'))  
        .pipe(browserSync.reload({stream:true}));  
});

//压缩js
gulp.task('js', function() {
    gulp.src(['src/js/zepto.js','src/js/index.js'])
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/pkg'));
        .pipe(browserSync.reload({stream:true})); 
});  
  
// 压缩图片  
gulp.task('images', function () {  
    gulp.src('src/img/*.*')  
        .pipe(changed('dist/img', {hasChanged: changed.compareSha1Digest}))  
        .pipe(imageMin({  
            progressive: true,// 无损压缩JPG图片  
            svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性  
            use: [pngquant()] // 使用pngquant插件进行深度压缩  
        }))  
        .pipe(gulp.dest('dist/img'))  
        .pipe(browserSync.reload({stream:true}));  
});

//tinypng高质量压缩
gulp.task('tinypng', function () {
    gulp.src('src/img/*.*')
        .pipe(tinypng({
            key: '3rfgLkTsUARLRD3-AU5ZxN5v4Q7VkieB',
            sigFile: '',
            log: false
        }))
        .pipe(gulp.dest('dist/img'));
        .pipe(browserSync.reload({stream:true})); 
});  
  
//启动热更新  
gulp.task('serve', ['delete'], function() {  
    gulp.start('script','less','html','tinypng');  
    browserSync.init({  
        port: 2017,  
        server: {  
            //baseDir: ['dist'],
            proxy: "http://192.168.115.86/demo/github/demo/gulp/", 
            //代理地址目录 http://192.168.116.87:3001/list.html
            baseDir: './'  
        }  
    });  
    gulp.watch('src/js/*.js', ['script']);         //监控文件变化，自动更新  
    gulp.watch('src/less/*.less', ['less']);
    gulp.watch('src/css/*.css', ['css']);  
    gulp.watch('*.html', ['html']);  
    gulp.watch('src/img/*.*', ['tinypng']);  
});  
  
gulp.task('default',['serve']);  

//发布
gulp.task('default', ['js','css','img','watch']) 

//开发
gulp.task('dev', ['connect','watch', 'open'])  

//gulp build 就可以执行这几个任务
gulp.task('build',['img','css'])

package.json文件

{
  "name": "gulp-demo",
  "version": "2.0.0",
  "author": "galan",
  "devDependencies": {
    "browser-sync": "2.18.8",
    "del": "2.2.2",
    "gulp": "^3.8.10",
    "gulp-change": "1.0.0",
    "gulp-changed": "^3.0.0",
    "gulp-clean": "0.3.1",
    "gulp-clean-css": "3.0.4",
    "gulp-concat": "^2.6.0",
    "gulp-cssmin": "0.1.7",
    "gulp-htmlmin": "3.0.0",
    "gulp-imagemin": "3.1.1",
    "gulp-less": "3.3.0",
    "gulp-tinypng-compress": "1.2.1",
    "gulp-uglify": "1.4.2",
    "gulp-util": "~2.2.9",
    "imagemin-pngquant": "5.0.0"
  },
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "dependencies": {
    "gulp-clean-css": "^3.0.4"
  }
}

1.匹配符 *、**、！、{}

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')        // {} 匹配{}里的文件名

2.文件操作

del (替代gulp-clean)

var del = require('del');

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

gulp-rename,描述：重命名文件。

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

gulp.src('./hello.txt')
  .pipe(rename('gb/goodbye.md'))    // 直接修改文件名和路径
  .pipe(gulp.dest('./dist')); 

gulp.src('./hello.txt')
  .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-filter,描述：在虚拟文件流中过滤文件。

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

const f = filter(['**', '!*/index.js']);
gulp.src('js/**/*.js')
    .pipe(f)                        // 过滤掉index.js这个文件
    .pipe(gulp.dest('dist'));

const f1 = filter(['**', '!*/index.js'], {restore: true});
gulp.src('js/**/*.js')
    .pipe(f1)                       // 过滤掉index.js这个文件
    .pipe(uglify())                 // 对其他文件进行压缩
    .pipe(f1.restore)               // 返回到未过滤执行的所有文件
    .pipe(gulp.dest('dist'));       // 再对所有文件操作，包括index.js

压缩

gulp-uglify,描述：压缩js文件大小。

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

gulp.src('./hello.js')
    .pipe(uglify())                 // 直接压缩hello.js
    .pipe(gulp.dest('./dist'))

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

gulp-csso,描述：压缩优化css。

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

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

gulp-html-minify,描述：压缩HTML

var htmlminify = require('gulp-html-minify');

gulp.src('index.html')
    .pipe(htmlminify())
    .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('./src/*')
    .pipe(zip('all.zip'))                   // 压缩成all.zip文件
    .pipe(gulp.dest('./dist'))

JS/CSS自动注入

gulp-autoprefixer,描述：自动为css添加浏览器前缀。

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

gulp.src('./css/*.css')
    .pipe(autoprefixer())           // 直接添加前缀
    .pipe(gulp.dest('dist'))

gulp.src('./css/*.css')
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],      // 浏览器版本
        cascade：true                       // 美化属性，默认true
        add: true                           // 是否添加前缀，默认true
        remove: true                        // 删除过时前缀，默认true
        flexbox: true                       // 为flexbox属性添加前缀，默认true
    }))
    .pipe(gulp.dest('./dist'))

gulp-useref,描述：解析构建块在HTML文件来代替引用未经优化的脚本和样式表。

// index.html

// gulpfile.js

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

gulp.src('index.html')
    .pipe(useref())
    .pipe(gulp.dest('./dist'))

替换之后的index.html中就会变成：

 // 之前的两个替换成一个了

gulp-rev,描述：给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css

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-html-replace,描述：替换html中的构建块。

// index.html

// css是buildName,可以自己定义

// gulpfile.js

var htmlreplace = require('gulp-html-replace');

gulp.src('index.html')
    .pipe(htmlreplace({
        'css':'all.css'                     // css是index.html中定义的buildName
    }))
    .pipe(gulp.dest('./dist'))

替换之后的index.html中就会变成：

 // 之前的两个替换成一个了

工具

gulp-sass,描述：编译sass。

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

gulp.src('./sass/**/*.scss')
    .pipe(sass({
        outputStyle: 'compressed'           // 配置输出方式,默认为nested
    }))
    .pipe(gulp.dest('./dist/css'));

gulp.watch('./sass/**/*.scss', ['sass']);   // 实时监听sass文件变动,执行sass任务

gulp-babel,描述：将ES6代码编译成ES5。

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

gulp.src('./js/index.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'))

browser-sync,监控页面，实现即时刷新

var browserSync = require('browser-sync').create();//及时刷新页面
var reload      = browserSync.reload;

gulp.task('watch',function() {
    browserSync.init({
        server: {
            //proxy: "http://192.168.116.87/demo/vue/gulp/" 
            //代理地址 http://192.168.116.87:3001/list.html
            baseDir: './'
        },
    });

    gulp.watch("src/js/*.js",['js'],reload);
    gulp.watch("css/*.css",['css'],reload);
    gulp.watch("*.html").on('change', reload);
});

分类

标签