精通gulp常用插件

gulp是个啥

gulp是一种前端构建工具,可以增强我们的工作流程
相关网站: Gulp中文官网 —- Gulp入门指南 —- Gulp英文官网 —- npm-gulp

安装

这里写图片描述

除了gulp还有哪些选择

到哪儿去找最好用的gulp插件

1.gulp-plugins搜索
列表中的每个插件都有归类的标签,可以点相关标签去查看相近的插件有哪些
这里写图片描述
2.npm插件搜索
输入gulp,即可列出所有包名带gulp的插件,还可以从最佳,受欢迎程度,代码质量,维护等几个纬度对搜索结果进行排名

3.别人的team总结的资源
这个team总结的常用的gulp插件比较详细,每一个都有github的连接.还列有gulp相关的视频资源连接

我常用的gulp

css
- gulp-autoprefixer
- gulp-less
- gulp-csso
- gulp-uncss
- gulp-cssmin
js
- gulp-babel
- gulp-uglify
html
- gulp-ejs
- gulp-useref
- gulp-html-replace
- gulp-rev
- gulp-rev-replace
image
- imagemin
file
- gulp-header
- gulp-concat
- gulp-ext-replace
- gulp-clean
server
- connect
其他
- gulp-if

平时定义好gulpfile.js文件后基本就不变的,常会变的是项目的路径,所以这里我会定义一个项目的路径.
如果要给项目单独配置gulpfile.js文件,更改basepath也很方便

var gulp = require('gulp'),        /*载入gulp模块*/
    projectPath = "task1",         /*定义项目名*/
    basePath = 'project/' + projectPath + '/';   /*定义基本路径*/

名字:gulp-header
描述:给文件头部添加信息
snippet:

var header = require('gulp-header'); /*载入gulp-header模块*/
var pkg = require("./package.json"); /*获取json文件*/
var banner =                         
"/** \n\
* " + pkg.name + " V" + pkg.version + " \n\
* By 小珍\n\
*/\n";

名字:gulp-less
描述: gulp插件 less预编译
snippet:

var less = require('gulp-less');                  
var autoprefixer = require('gulp-autoprefixer');  /*添加浏览器前缀插件*/

gulp.task('less', function() {
    return gulp.src([basePath + 'src/css/*.less'])     /*匹配任务文件*/
        .pipe(less())                 /*less编译*/
        .pipe(autoprefixer())         /*添加浏览器前缀*/
        .pipe(header(banner))         /*添加文件头*/
        .pipe(gulp.dest(basePath + 'src/css/'));      /*保存任务结果*/

});

名字:gulp-csso
描述: csso 优化，合并可合并的css
snippet:

var csso = require('gulp-csso');

gulp.task('csso', function() {
    return gulp.src(basePath + 'dist/css/*.css')
        .pipe(csso())
        .pipe(gulp.dest(basePath + 'dist/css/'))
});

名字:gulp-uncss
描述: gulp插件去除css文件中的未用到的css
snippet:

var uncss = require('gulp-uncss');
gulp.task('uncss', ["csso", "cssmin"], function() {
    gulp.src(basePath + 'dist/css/*.css') 
        .pipe(uncss({
            html: [basePath + 'dist/*.html'] /*这里是项目所有的html目录*/
        }))
        .pipe(gulp.dest(basePath + 'dist/uncss')); 
})

名字:gulp-cssmin
描述: css压缩
snippet:


var cssmin = require('gulp-cssmin');
var ext_replace = require('gulp-ext-replace'); /*文件扩展名替换插件*/
gulp.task('cssmin', ["less"], function() {/*先执行less任务,再执行cssmin任务*/
    gulp.src([basePath + 'dist/css/*.css',
     '!' + basePath + 'dist/css/*.min.css'])
        .pipe(cssmin())
        .pipe(header(banner))
        .pipe(ext_replace('.min.css'))
        .pipe(gulp.dest(basePath + 'src/css/'));
});

名字:gulp-babel
描述: babel 将es6编译成es5
snippet:

var babel = require('gulp-babel');

gulp.task('babel',function(){
    return gulp.src(basePath + 'src/js/*.js')
            .pipe(babel({
                presets:['es2015']
            }))
            .pipe(gulp.dest(basePath+'dist/js/'));
})

名字:gulp-uglify
描述: js混淆压缩
snippet:

var uglify = require('gulp-uglify');
var ext_replace = require('gulp-ext-replace'); /*文件扩展名替换插件*/
gulp.task('uglify', function() {
    return gulp.src([basePath + 'dist/js/*.js', '!' + basePath + 'dist/js/*.min.js'])
        .pipe(uglify({
            preserveComments: "license"
        }))
        .pipe(ext_replace('.min.js'))
        .pipe(gulp.dest(basePath + 'dist/js'));
});

名字:gulp-if
描述:控制流有条件地运行一个任务。
snippet:

var gulpif = require('gulp-if');
var concat = require('gulp-concat'); /*合并文件减少网络请求*/
var condition = true;               /*判断条件*/
gulp.task('gulpif', function() {
    gulp.src(basePath + 'dist/js/*.js')
        .pipe(gulpif(condition,uglify(),concat('all.js'))) 
        /* condition为true时执行uglify(), else 执行concat('all.js')*/
        .pipe(gulp.dest(basePath + "dist/js/"));
});

名字:gulp-imagemin
描述: imagemin 图片压缩
snippet:

var imagemin = require('gulp-imagemin');
gulp.task('imagemin', function() {
    gulp.src(basePath + 'src/images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 3, //类型：Number默认：3取值范围：0-7（优化等级）
            progressive: false, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest(basePath + 'dist/images/'));
});

名字:gulp-ejs
描述:合并html模板批量生成演示的html文档的时候很有用
snippet:

var ejs = require("gulp-ejs");
gulp.task('ejs', function() {
    return gulp.src([basePath + 'src/*.html', 
    "!" + basePath + "./src/_*.html"])
        .pipe(ejs({}))
        .pipe(gulp.dest(basePath + "dist/"));
});

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>ejs</title>
</head>
<body>
    <% include _header.html %>
</body>
</html>

<!-- _header.html -->
<header>
   这里是公共头部
</header>

名字:gulp-useref
描述:解析HTML文件中的构建块,对html页面中的js，css引用进行合并.
作用:src中的html文件中引用多个样式文件,通过构建工具的文件合并多个文件为*all.css. 新的html文件里就自动删除以前的多个样式文件的引用,重新引用*all.css文件
snippet:

var useref = require('gulp-useref');
gulp.task('useref', function() {
    gulp.src(basePath + 'src/*.html')
        .pipe(useref())
        .pipe(gulp.dest(basePath + "dist/"))
});

构建块的语法:
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
<type>:三种类型,js,css,remove ;remove将移除构建块中的内容

<!-- 源文件 -->
<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

<!-- 结果 -->
<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script> 
</body>
</html>

名字:gulp-html-replace
描述:替换html中的构建块与useref类似，但可以将重命名写在任务配置里
snippet:

var htmlreplace = require('gulp-html-replace');
gulp.task('htmlreplace', function() {
    gulp.src(basePath + 'src/*.html')
        .pipe(htmlreplace({
           'cssbuild': 'styles.min.css',
           'jsbuild': 'js/bundle.min.js'                
           /* cssbuild是index.html中定义的buildName*/
        }))
        .pipe(gulp.dest(basePath + "dist/"))
});

构建块的语法:
<!-- build:<name> -->
Everything here will be replaced
<!-- endbuild -->

<html>
<head>
    <!-- build:cssbuild  -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:jsbuild  -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

名字:gulp-rev
描述:给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
snippet:

var rev = require('gulp-rev');
gulp.task('rev', function() {
    gulp.src(basePath + 'dist/css/*.css')
        .pipe(rev())
        .pipe(gulp.dest(basePath + "dist/css/"))
});

名字:gulp-rev-replace
描述:重写html中被gulp-rev重命名的文件名
snippet:

var revReplace = require('gulp-rev-replace');
gulp.task('revreplace', function() {
    gulp.src(basePath + 'src/*.html')
        .pipe(useref()) // 替换HTML中引用的css和js
        .pipe(rev()) // 给css,js,html加上hash版本号
        .pipe(revReplace()) // 把引用的css和js替换成有版本号的名字
        .pipe(gulp.dest(basePath + "dist/"))
});

名字:gulp-connect
描述: connect 本地服务器
snippet:

var connect = require("gulp-connect");
gulp.task('server', function() {
    connect.server({

        root: './' + basePath + 'dist/',

        livereload: true

    });
});

/*html文件重新加载*/
gulp.task('htmlreload', function() {
    gulp.src(basePath + 'dist/*.html')
        .pipe(connect.reload());
});

gulp watch
描述: gulp 观察,定义哪些文件发生变化时,执行哪些gulp任务
snippet:

gulp.task('watch', function() {
    gulp.watch(basePath + 'src/css/*.less', ['less','html']);
    gulp.watch(basePath + 'src/*.html', ['ejs',,'html']);
  });

gulp task
描述: gulp 任务,定义gulp任务名和任务流
snippet:

gulp.task("default", ['watch', 'server']);
gulp.task("build", ['ejs', 'imagemin', 'uglify', 'uncss']);

来精通下gulp常用插件

精通gulp常用插件

gulp是个啥

安装

除了gulp还有哪些选择

到哪儿去找最好用的gulp插件

我常用的gulp

猜你喜欢