Gulp常用的一些插件_gulp 必装插件-程序员宅基地

技术标签: web前端  JavaScript  

自己常用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'));
})
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dongxingpeng/article/details/87368505

智能推荐

【oracle数据文件损坏处理】-程序员宅基地

文章浏览阅读67次。2、在sqlplus中登录 conn mkgk/mkgk as sysdba,执行一下内容。2和6的状态是“status”,代表需要恢复。1、查看datafile信息(文件号、是否在线和路径名字)(此操作是为将数据文件6的状态改为在线)

VSCode C++开发环境设置-调试 macOS版_osx vscode 调试 addon-程序员宅基地

文章浏览阅读1.5k次。VSCode C++开发环境设置-调试引用,重点在于调试器设置文件 launch.json 。请先阅读VSCode C++开发环境设置-构建及运行 macOS版, 本文在其基础上进行说明。步骤我们创建launch.json文件来配置VSCode在我们调试的时候启动LLDB调试器。主菜单Run->Add Configuration, 在弹出的下拉窗口中选择C++ (GDB/LLDB)。然后下拉窗口选项变成了预定义的调试配置。选择clang++ build and debug._osx vscode 调试 addon

java验证webservice_java – 访问此资源需要完全身份验证 – Rest webservice调用-程序员宅基地

文章浏览阅读465次。我的应用程序是使用spring框架开发的.我使用spring框架创建了一个新的rest webservice.@Controllerpublic class MyTestController {@Injectprivate MyService service;@RequestMapping(value = "/acc/Status/{accNum}",method = RequestMethod...._java webservice需要验证才可以

mongodb实战_mongodb enum-程序员宅基地

文章浏览阅读2.7k次,点赞3次,收藏22次。先上图:pom.xml

向指定图像中加入干扰图像_图像添加直线干扰-程序员宅基地

文章浏览阅读861次。clcclearclose allload(‘存储的图像文件’);%本代码中采用RGB图像存储,并且把每张图片的每一个维度都转成一个行向量存到三个向量里;%%共r1人,每人r2张图,每人随机选择r3张r1=num;r2=x1;r3=x2;n=x3;%要加入的干扰图片的数量%%原图片的高度与宽度;x_h=height;y_w=width;xx_h=height_;%要加入的..._图像添加直线干扰

正则表达式和表单校验_html 表单校验 正则表达式-程序员宅基地

文章浏览阅读249次。正则表达式/../ 代表一个模式的开始和结束^ 匹配字符串的开始$ 匹配字符串的结束\s 任何空白字符\S 任何非空白字符\d 匹配一个数字字符,等价于[0-9]\D 除了数字之外的任何字符,等价于[^0-9]\w 匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]\W 任何非单字字符,等价于[^A-Za-z0-9_]. 除了换_html 表单校验 正则表达式

随便推点

【11g Performance 】11 The Query Optimizer_11 the following information is available about t-程序员宅基地

文章浏览阅读282次。11The Query OptimizerThis chapter discusses SQL processing, optimization methods, and how thequery optimizer(usually called theoptimizer) chooses a specific plan to execute SQL.The chapter con..._11 the following information is available about t

Android 遍历文件夹,搜索指定扩展名的文件_1278-程序员宅基地

文章浏览阅读1k次。private List lstFile =new ArrayList(); //结果 List public void GetFiles(String Path, String Extension,boolean IsIterative) //搜索目录,扩展名,是否进入子文件夹{ File[] files =new File(Path).listFiles(_1278

辉哥基于android S 分析过度动画以及窗口动画_窗口动画和过渡动画区别-程序员宅基地

文章浏览阅读4.7k次,点赞4次,收藏12次。动画分析android 内有很多类型 这里主要讲过度动画和窗口动画的实现原理,包括动画如何启动以及后续如何更新帧数据。android 分了各种动画 比如过度动画或者窗口动画 然后过度动画又分了好多种什么Activity 打开动画 关闭动画等等,这里不要被这些花里胡哨的分类给搞昏了头,这里不管分了多少类,其实也只是区别场景而已,比如是app内子activity打开就为TRANSIT_OLD_ACTIVITY_OPEN ,然后应用间切换 其实本质也就是TASK 间切换 就为TRANSIT..._窗口动画和过渡动画区别

DS18B20嵌入式驱动程序_ds18b20驱动程序-程序员宅基地

文章浏览阅读3.4k次。DS18B20的特点:DS18B20 单线数字温度传感器,即“一线器件”,其具有独特的优点:( 1 )采用单总线的接口方式 与微处理器连接时仅需要一条口线即可实现微处理器与 DS18B20 的双向通讯。单总线具有经济性好,抗干扰能力强,适合于恶劣环境的现场温度测量,使用方便等优点,使用户可轻松地组建传感器网络,为测量系统的构建引入全新概念。( 2 )测量温度范围宽,测量精度高 DS18..._ds18b20驱动程序

java文件编译中报错unmappable character for encoding UTF-8-程序员宅基地

文章浏览阅读5.3k次。自己重新新建文件,然后代码复制粘贴就可以了。这说明有部分文件不是以utf-8编码创建的,我出现这个问题的原因是因为我的代码文件是直接自动生成的,文件不是自己创建的,导致使用的编码是不是utf-8,自己重新新建文件,然后代码复制粘贴就可以了。..._unmappable character for encoding utf-8

一句话解决RecyclerView 高度设置wrap_content 不显示 无作用的bug_recyclerview wrap_content不展示-程序员宅基地

文章浏览阅读5.7k次。一句话解决RecyclerView 高度设置wrap_content 不显示 无作用的bug_recyclerview wrap_content不展示

推荐文章

热门文章

相关标签