Gulp常用插件实践

谁践踏了优雅 2022-06-08 22:51 274阅读 0赞

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

首先是js和css有关的插件啦  
gulp-cssmin压缩css文件，gulp-less处理less文件，其他预处理也有相对应的插件，gulp-uglify压缩js文件  
下面演示一下插件的使用

var gulp = require('gulp');
    var cssmin = require('gulp-cssmin');
    
    gulp.task('cssmin', function() { 
        gulp.src('A/a.css')
            .pipe(cssmin())
            .pipe(gulp.dest('B'))
    })

这段代码很简单就是创建cssmin任务，文件入口是a.css出口时B文件夹，中间调用了cssmin方法，  
执行gulp cssmin的结果就是最后在B文件夹下会自动产生一个a.css并且里面的css已经压缩

//A/a.css下的
    .text {
        text-align: center;
        font-size: 16px;
        font-weight: 700;
    }
    // B/a.css下的
    .text{
       text-align:center;font-size:16px;font-weight:700}

下面再看下js压缩

var gulp = require('gulp');
    var uglify =require('gulp-uglify');
    
    gulp.task('jsmin', function() { 
        gulp.src('A/a.js')
            .pipe(uglify())
            .pipe(gulp.dest('B'))
    })

代码就不细说了很简单直接看结果

function Person(name,age) { 
        this.name = name;
        this.age = age;
    }
    压缩后的
    function Person(n,e){ this.name=n,this.age=e}

当然我们可以使用ES6语法，那么我们就需要引入一些babel的gulp插件

npm install --save-dev gulp-babel babel-preset-[env] babel-core

要安装三个注意了，一个是gulp的babel插件还有一个是环境\[env\]可选项有很多下面贴上地址，我们用的是es2015 因为我们要转译成2015 最后一个是babel本身的核心包

环境地址[https://babeljs.io/docs/plugins/\#presets][https_babeljs.io_docs_plugins_presets]

var babel = require('gulp-babel');
    
    gulp.task('babel', () => gulp.src('A/a.js') .pipe(babel({ presets: ['es2015']//这里就是我们下载的环境 })) .pipe(gulp.dest('B')) );

看一下结果，这里用了ES6 class语法

class Person {
        constructor(name,age) {
            this.name = name;
            this.age = age;
        }
    }
    编译后
    "use strict";
    
    function _classCallCheck(instance, Constructor) {  if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
    
    var Person = function Person(name, age) { 
        _classCallCheck(this, Person);
    
        this.name = name;
        this.age = age;
    };

接下来再介绍一些零零碎碎用的常用插件  
livereload（浏览器自动刷新）功能的插件gulp-livereload和gulp-connect，这里介绍下gulp-connect

图片压缩插件gulp-imagemin这个很简单就不写代码了  
贴上网址大家自己看看就行[https://www.npmjs.com/package/gulp-imagemin][https_www.npmjs.com_package_gulp-imagemin]

文件合并插件 gulp-concat [https://www.npmjs.com/package/gulp-concat][https_www.npmjs.com_package_gulp-concat]

gulp.task('concat', function() { 
      return gulp.src('A/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('B'));
    });

剩下的就不一一举例子了  
gulp-plumber 处理gulp错误的，[https://www.npmjs.com/package/gulp-plumber][https_www.npmjs.com_package_gulp-plumber]  
gulp-clean 用来清除的 [https://www.npmjs.com/package/gulp-clean][https_www.npmjs.com_package_gulp-clean]  
gulp-rename 用来重命名 [https://www.npmjs.com/package/gulp-rename][https_www.npmjs.com_package_gulp-rename]  
gulp-if 可以在gulp写一些逻辑 [https://www.npmjs.com/package/gulp-if][https_www.npmjs.com_package_gulp-if]

先写这些，以后再在补充一些用过的其他的

[https_babeljs.io_docs_plugins_presets]: https://babeljs.io/docs/plugins/#presets
[https_www.npmjs.com_package_gulp-imagemin]: https://www.npmjs.com/package/gulp-imagemin
[https_www.npmjs.com_package_gulp-concat]: https://www.npmjs.com/package/gulp-concat
[https_www.npmjs.com_package_gulp-plumber]: https://www.npmjs.com/package/gulp-plumber
[https_www.npmjs.com_package_gulp-clean]: https://www.npmjs.com/package/gulp-clean
[https_www.npmjs.com_package_gulp-rename]: https://www.npmjs.com/package/gulp-rename
[https_www.npmjs.com_package_gulp-if]: https://www.npmjs.com/package/gulp-if