gulp常用插件使用指南(一)

前言

如果你已经在项目中引入了gulp,那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个,分别用于开发和生产。

  • 以下模块地址均为官网地址,如果觉得请求地址慢,可以访问淘宝镜像的包说明地址,http://npm.taobao.org/
  • 以下模块介绍顺序不分先后,代码仅供参考,亲测可用。
  • 所有的模块使用都需要require引入,如果下面代码有遗漏请自觉加入。

gulp-less

  • 模块地址:https://www.npmjs.com/package/gulp-less/

  • 安装

    $ npm install gulp-less --save-dev 
    复制代码
  • 使用场景:开发完成之后利用任务自动将开发代码编译

  • 使用

    var less = require('gulp-less');
    gulp.task('lessCompile', function () {
      return gulp.src('src/less/style.less')
        .pipe(less())//less编译 
        .pipe(gulp.dest('dist/css'));//编译为同名的文件,不需要单独命名样式文件
    });
    
    复制代码

gulp-rename

  • 模块地址:https://www.npmjs.com/package/gulp-rename/

  • 安装

    $ npm install gulp-rename --save-dev 
    复制代码
  • 使用场景:区别于开发文件或者追加版本号等,入参有path:子属性有dirname,basename ,prefix,suffix,extname。可以通过字符串,方法以及hash三种方式。个人建议使用最后一个最方便,fn的最强大。

  • 使用

    var rename = require('gulp-rename');
    gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
        //第一种方式
      .pipe(rename({
        dirname: "main/text/ciao",  basename: "aloha",prefix: "bonjour-",
        suffix: "-hola", extname: ".md"}))
          //第二种方式
       .pipe(rename(function (path) {
        path.dirname += "/ciao";
        path.basename += "-goodbye";//支持更灵活的定义
      })
    复制代码

gulp-clean-css

  • 模块地址:https://www.npmjs.com/package/gulp-clean-css/

  • 安装

    $ npm install gulp-clean-css --save-dev 
    复制代码
  • 使用场景:导出到生产之前需要压缩样式表 配置说明:

  1. advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
  2. compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'':IE9+兼容模式]
  3. keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
  4. keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
  • 使用

    var cleanCSS = require('gulp-clean-css');
    gulp.task('cleanCss', function () {
      return gulp.src('src/less/style.less')
        .pipe(cleanCSS())//压缩css文件
    });
    
    复制代码

gulp del

  • 模块地址:http://www.gulpjs.com.cn/docs/recipes/delete-files-folder/

  • 安装

    $ npm install gulp del --save-dev 
    复制代码
  • 使用场景:删除指定路径的文件,删除管道中的文件(需要vinylPaths模块的安装),如果是整 个文件夹内容清空/.如果是包括文件夹删除,直接文件目录即可,如/**/

  • 使用

    var del=require('del'),vinylPaths = require('vinyl-paths');
    //删除指定路径的文件
    gulp.task("clean:css",function(cb){
        del(['dist/css/*.css',  '!dist/css/*min.css'], cb);})
    gulp.task("del-less",function(){
        return gulp.src('src/less/demo.less')
        .pipe(vinylPaths(del))
    })//删除管道中的文件
    
    复制代码

gulp-uglify

  • 模块地址:https://www.npmjs.com/package/gulp-uglify

  • 安装

    $ npm install gulp-uglify --save-dev 
    复制代码
  • 使用场景:脚本上线之前完成压缩工作

  • 使用

    var uglify = require('gulp-uglify');
    gulp.task('js', function () {
      return gulp.src('src/js/*.js')
        .pipe(uglify())
    });
    
    复制代码

gulp-concat

  • 模块地址:https://www.npmjs.com/package/gulp-concat

  • 安装

    $ npm install gulp-concat --save-dev 
    复制代码
  • 使用场景:web优化,合并文件减少http请求,同类型的文件才可以合并,比如css可以合并,js可以合并等。

  • 使用

    var fileConcat = require('gulp-concat');
    gulp.task('fileConcat', function () {
      return gulp.src('src/js/*.js') 
        .pipe(concat("combine.js"))//可以控制合并生成的文件
    });
    
    复制代码

gulp copy

  • 不需要安装任何模块,因为本身gulp的文件流管道机制支持文件拷贝

  • 使用场景:复制相关的文件结构到生产目录,比如页面文件。因为页面文件中的都是相对目录,所以当css以及js使用为产出地址时,要求页面等必备的希望产品的也放到产出目录。

  • 使用

    gulp.task("copyhtmldir",function(){
        return gulp.src(['src/html/**/*'])
        .pipe(gulp.dest('dist/html'))
    
    })
    复制代码

gulp-imagemin

  • 模块地址:https://www.npmjs.com/package/gulp-imagemin

  • 安装

    $ npm install gulp-imagemin  --save-dev 
    复制代码
  • 使用场景:上线之前对不必要的高精度图片进行压缩,避免不必要的高清图片。优化加载速度,提升页面性能,配置项为json类型。

  1. optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
  2. progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
  3. interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
  4. multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
  • 使用

    var imgmin=require("gulp-imagemin");
    gulp.task("imgmin",function(){
        return gulp.src('src/images/*')
        .pipe(imgmin())
        .pipe(gulp.dest("dist/images"))})
    复制代码

gulp-autoprefixer

  • 模块地址:https://www.npmjs.com/package/gulp-autoprefixer

  • 安装

    $ npm install gulp-autoprefixer --save-dev 
    复制代码
  • 使用场景:不熟悉厂商前缀的开发者可以在开发完成之后利用此模块一次性追加前缀,可以灵活配置前缀需求的浏览器列表。

  1. browsers:[] (定义使用的浏览器版本)
  2. cascade : true (定义对属性进行对齐操作),默认true
  3. remove : true (去掉不必要的前缀) ,默认true
  • 使用

    //直接对管道文件操作
     .pipe(autoprefixer({
                browsers:["last 5 versions"],
                cascade:true,
                remove:true}))
    复制代码
  • 相关文档地址:gulp设置autoprefixer

gulp-load-plugins

  • 模块地址:https://www.npmjs.com/package/gulp-load-plugins

  • 安装

    $ npm install gulp-load-plugins --save-dev 
    复制代码
  • 使用场景:所有gulp集成的模块插件如果前面有gulp- 开头并且在package.json中有依赖注入,那么不需要重复声明变量,可以直接用$.name使用,后面多单词从第二个词开始首字母需要大写。

  • 使用

    var $ = require('gulp-load-plugins')();
    $.rename
    //等效于下面的写法
    var rename=require('gulp-rename');
    rename
    
    复制代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值