Gulp常用的一些插件

自己常用Gulp插件,这是gulpfile.js文件,喜欢的可以复制下来尝试用用。

var gulp = require( 'gulp' ),
    //复制文件
    bHtml = require('gulp-b-html'),
    //服务器
    webserver = require('gulp-webserver'),
    // js压缩
    // pump = require('pump'),
    // babel = require('gulp-babel'),
    // uglify = require('gulp-uglify-cli'),
    uglify = require('gulp-uglify');
    pump = require('pump');
     babel = require('gulp-babel');
    // css添加前缀
    autoprefixer = require('gulp-autoprefixer'),
    //css压缩
    cleanCSS = require('gulp-clean-css'),
    // //html压缩
    htmlminify = require('gulp-html-minify'),
    //图片压缩
    imgMini = require('gulp-tinypng-unlimited');
//    gulp-watch
    watch = require('gulp-watch')
;
var params = ['cleanCSS','js','copyHtml'];
gulp.task('default',params,function () {
    gulp.src('./')
        .pipe(webserver({
            livereload: true, // 启用LiveReload
            open: './index.html', // 服务器启动时自动打开网页
            port: 8080 // 服务端口
        }));
})
//复制HTML
gulp.task('copyHtml',function () {
    console.log("" ,"copy")
    gulp.src('./*.html')
        .pipe(bHtml())
        .pipe(htmlminify())
        .pipe(gulp.dest('./dist'));
})
//压缩js
// gulp.task('uglify',function () {
//     gulp.src('./js/*.js')
//         .pipe(uglify())
//         .pipe(gulp.dest('./dist/js'));
// })
gulp.task('js', function(cb){
    pump([
            gulp.src('./js/*.js'),
            babel({presets: ['es2015']}),
            //2017年6月14日测试, 发现使用es6的let语句定义变量会发生错误, 如果发生错误把第4步的gulp-babel两个插件安上, 并写上上面的语句
            uglify(),//压缩操作
            gulp.dest('./dist/js')
        ],
        cb//函数有参数
    );
});
// gulp.task('uglify', function(cb){
//     pump([
//             gulp.src('./js/*.js'),
//             babel({presets: ['es2015']}),
//             //2017年6月14日测试, 发现使用es6的let语句定义变量会发生错误, 如果发生错误把第4步的gulp-babel两个插件安上, 并写上上面的语句
//             uglify(),//压缩操作
//             gulp.dest('./dist/js')
//         ],
//         cb//函数有参数
//     );
// });
// 压缩css
gulp.task('cleanCSS',function () {
    gulp.src('./css/*.css')
        .pipe(autoprefixer())
        .pipe(cleanCSS())
        .pipe(gulp.dest('./dist/css'));
})
// 监听文件: Watch
gulp.watch(['./js/*.js','./js/**/*.js'], function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running ta' +
        'sks...');
});
gulp.watch(['./css/*.css','./css/**/*.css'], function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running ta' +
        'sks...');
});

//图片压缩
gulp.task('imgMini',function () {
    // gulp.src('./img/*.@(svg|gif)')
    //     .pipe(bHtml())
    //     .pipe(gulp.dest('./dist/img'));
    gulp.src('./images/*.@(png|jpg|jpeg)')
        .pipe(imgMini())
        .pipe(gulp.dest('./dist/images'));
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值