文档章节

gulp常用插件及其使用(更新2016-05-19)

WolfX
 WolfX
发布于 2016/05/12 10:52
字数 979
阅读 1009
收藏 5

一些常用的gulp插件

gulp的插件数量虽然没有grunt那么多,但也可以说是应有尽有了,下面列举一些常用的插件。

1 重命名

使用gulp-rename 安装:npm install --save-dev gulp-rename 用来重命名文件流中的文件。用gulp.dest()方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用gulp-rename插件来改变文件流中的文件名。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");

gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
    //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename
});

2 js文件压缩

使用gulp-uglify 安装:npm install --save-dev gulp-uglify 用来压缩js文件,使用的是uglify引擎

var gulp = require('gulp'),
    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考:
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

3 css文件压缩

使用gulp-minify-css(也可以使用gulp-cssnano) 安装:npm install --save-dev gulp-minify-css 要压缩css文件时可以使用该插件

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");

gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

4 html文件压缩

使用gulp-minify-html 安装:npm install --save-dev gulp-minify-html 用来压缩html文件

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");

gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

5 js代码检查

使用gulp-jshint 安装:npm install --save-dev gulp-jshint 用来检查js代码

var gulp = require('gulp'),
    jshint = require("gulp-jshint");

gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});

6 文件合并

使用gulp-concat 安装:npm install --save-dev gulp-concat 用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了

var gulp = require('gulp'),
    concat = require("gulp-concat");

gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

7 less和sass的编译

less使用gulp-less,安装:npm install --save-dev gulp-less

var gulp = require('gulp'),
    less = require("gulp-less");

gulp.task('compile-less', function () {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});

sass使用gulp-sass,安装:npm install --save-dev gulp-sass

var gulp = require('gulp'),
    sass = require("gulp-sass");

gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

8 图片压缩

可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。 安装:npm install --save-dev gulp-imagemin

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

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist'));
});

gulp-imagemin的使用比较复杂一点,而且它本身也有很多插件,建议去它的项目主页看看文档

9 自动刷新

使用gulp-livereload插件,安装:npm install --save-dev gulp-livereload。 当代码变化时,它可以帮我们自动刷新页面 该插件最好配合谷歌浏览器来使用,且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen(); //要在这里调用listen()方法
  gulp.watch('less/*.less', ['less']);
});

10 sourcemaps/css自动前缀

安装:npm install --save-dev gulp-sourcemaps

安装:npm install --save-dev gulp-autoprefixer

var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

...
gulp.task('demo', function() {
    var css = [...];
    gulp.src(css)
        .pipe(sourcemaps.init())
        .pipe(concat("styles.css"))
        .pipe(cssnano())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./www/build'));   
});

11 base64

安装:npm install --save-dev gulp-base64

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

gulp.task('style', function() {
    var css = ['./www/libs/am-touch/amazeui.touch.css',
        "./www/css/main.css",
        "./www/css/page.main.css",
        "./www/css/checks.css",
        "./www/css/fullPageLoading.css",
        "./www/css/loading.css"
    ];
    return gulp.src(css)
        .pipe(concat("styles.css"))
        .pipe(autoprefixer())
        .pipe(base64({
            baseDir: "./www/css",
            extensions: ['png'],
            maxImageSize: 20 * 1024, // bytes
            debug: false
        }))
        .pipe(cssnano())
        .pipe(gulp.dest('./www/build'));
});

12 clean

安装:npm install --save-dev gulp-clean

var clean = require('gulp-clean');
gulp.task('clean', function() {
    return gulp.src(['./www/build/*'])
        .pipe(clean({
            force: true
        }));
});

13 plumber

安装:npm install --save-dev gulp-plumber

错误捕获,防止出错后中断gulp

var clean = require('gulp-clean');
gulp.task('clean', function() {
    return gulp.src(['./www/build/*'])
        .pipe(clean({
            force: true
        }));
});

© 著作权归作者所有

WolfX

WolfX

粉丝 52
博文 246
码字总数 31477
作品 0
南京
技术主管
私信 提问
Gulp

date: 2016-05-16 16:08:19 特点: 易于使用:通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。 构建快速:利用 Node.js 流的威力 插件高质:Gulp 严格的插件指南确保插件...

大仁孙
2016/07/15
18
1
江南红衣/jfinalshop-2.0

成功不仅是你拥有多少,更重要的是你帮助他人多少,有多少人因你而感动、因你而成长。 最新版地址 请点查看; jfinalshop-3.0 项目说明 本项目是基于jfinalshop2.0开发,JFinal2.0改成了JFi...

江南红衣
2016/10/27
0
0
gulp构建前端工程

什么是gulp? 是新一代的前端项目构建工具,你可以使用及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的和代码,甚至压缩你的图片,仅有少量的,所以非常容易学习。 使用 方式处...

半张一块
2016/07/27
2.8K
8
使用Glup.JS优化JS、CSS、图片,压缩合并

下面进入正题,简单说一下如何安装,使用gulp 1. 安装Gulp gulp的任务处理机制是,将来源档案当作输入,通过Node.js的Stream操作流,并将流导向gulp的任务处理插件plugins,处理完成后将结果...

Billydotzhang
2016/06/01
310
0
前端知识网站总汇

1.前端面试题解说及人力问题 www.haorooms.com/post/qiandu… 2.web Sockets的介绍说明 www.runoob.com/html/html5-… vue组件之间的通讯 whutzkj.space/2017/08/05/… MVC与MVVM的区别 www....

xuhaoxin123
2017/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
3
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
7
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部