Gulp常用的一些插件

骑猪看日落 2022-03-19 06:29 250阅读 0赞

### 自己常用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'));
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 gulp：条件语句插件——gulp-if

Condition条件判断 Only uglify the content if the condition is true, but send all the files

我不是女神ヾ/ 2022年12月02日 15:07/ 0 赞/ 211 阅读

相关 gulp：压缩CSS插件——gulp-clean-css

[gulp-clean-css插件介绍][gulp-clean-css] gulp-clean-css插件是[gulp][] plugin to minify CSS,

旧城等待，/ 2022年11月29日 12:22/ 0 赞/ 208 阅读

相关 gulp插件黑名单

在使用gulp插件的时候，应该参照官方的建议，不要使用官方黑名单的插件，避免出现一些莫名其妙的问题。 blackList地址 [https://github.com/g

绝地灬酷狼/ 2022年09月25日 15:19/ 0 赞/ 193 阅读

相关精通gulp常用插件

匹配符 \、\\、！、\{\} gulp.src('./js/.js') // 匹配js文件夹下所有.js格式的文件 gul

谁借莪１个温暖的怀抱￠/ 2022年06月17日 13:25/ 0 赞/ 208 阅读

相关 Gulp常用插件实践

上一篇文章介绍了一些Gulp一些基本操作，但平时开发时，那些基本的操作是无法满足我们的需求的，我们很多功能需要gulp插件来实现。进来就来写下平时用到的gulp插件。可以去np

谁践踏了优雅/ 2022年06月08日 22:51/ 0 赞/ 241 阅读

相关 gulp插件/gulp模块

1、gulp 介绍：[http://www.gulpjs.com.cn/docs/getting-started/][http_www.gulpjs.com.cn_docs

雨点打透心脏的1/2处/ 2022年06月06日 01:20/ 0 赞/ 479 阅读

相关 sublime常用的一些插件

一、安装及安装emmet插件首先,去sublime官网下载软件：\[[http://www.sublimetext.com/][http_www.sublimetext

末蓝、/ 2022年05月17日 01:21/ 0 赞/ 263 阅读

相关 Gulp常用的一些插件

自己常用Gulp插件，这是gulpfile.js文件，喜欢的可以复制下来尝试用用。 var gulp = require( 'gulp' ), /

骑猪看日落/ 2022年03月19日 06:29/ 0 赞/ 251 阅读

相关 IDEA操作技巧：一些常用且实用的插件

CodeGlance：可帮助我们快速定位代码，下载之后会在IDEA的编辑区右侧显示一个代码进度条设置方式打开设置可以看到有一个codeGlance栏，点击可以进行设

痛定思痛。/ 2022年03月01日 09:48/ 0 赞/ 280 阅读

相关常用的插件

一.css类 1.加载页(动画)：[Loader.CSS][] 二.图片处理类 1.图标库：[Iconfont-阿里巴巴矢量图标库][Iconfont-

痛定思痛。/ 2021年09月14日 02:44/ 0 赞/ 499 阅读