Gulp 插件及其使用
前端现在有很多的自动打包工具,各有优缺点,而gulp作为其中的一员,也有着很受人们的青睐,简单粗暴,然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的,本文简单介绍一些常用的gulp插件及其使用。
//文件包含
//学习链接 https://www.npmjs.com/package/gulp-file-include
var fileInclude = require('gulp-file-include');
//示例:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
//读取index.html并替换其中还@@include,模板可以传变量,详情见以上链接进行学习
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));
}); //压缩js插件
var uglify = require('gulp-uglify');
//示例:
/**
* 对js文件进行处理:压缩 注意:requirejs中变量名称不能在压缩时被修改,否则会导致requirejs失效
*/
gulp.task('dealJs', [ "clean" ], function() {
gulp.src('src/**/*.js').pipe(uglify({
mangle : false
// 类型:Boolean 默认:true 是否修改变量名
})) // 压缩js
.pipe(gulp.dest(''));
});
//压缩Css文件
var minifyCss = require('gulp-minify-css');
//示例/**
* 对js文件进行处理:压缩
*/
gulp.task('dealCss', [ "clean" ], function() {
gulp.src('src/**/*.css').pipe(minifyCss()) // 压缩css
.pipe(gulp.dest(''));
});
//压缩html
var htmlmin = require('gulp-htmlmin');
//示例:
//链接:http://www.ydcss.com/archives/20
var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'); gulp.task('testHtmlmin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/html/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'));
});
//删除文件或文件夹
var del = require('del'); //使用示例:
var gulp = require('gulp');
var del = require('del'); gulp.task('clean:mobile', function (cb) {
del([
'dist/report.csv',
// 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
'dist/mobile/**/*',
// 我们不希望删掉这个文件,所以我们取反这个匹配模式
'!dist/mobile/deploy.json'
], cb);
}); gulp.task('default', ['clean:mobile']);
//gulp-replace ,可以替换指定格式的字符到指定字符,例如: var replace = require('gulp-replace'); // 遍历所有的词条,替换文件流中存在的词条
for (var i = 0; i < words.length; i++) {
stream = stream.pipe(replace("${I18N[" + words[i] + "]}", getEnWord(words[i])));
}
就会把${I18N{admin.test}}这个格式的的内容替换成指定的字符
Gulp 插件及其使用的更多相关文章
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- gulp 插件
原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...
- gulp插件(gulp-jmbuild),用于WEB前端构建
源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...
- gulp插件gulp-usemin简单使用
关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...
- 使用gulp插件来自动刷新页面。
http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...
- 将less编译成css的gulp插件
简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...
- 如何编写一个gulp插件
很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...
- gulp插件构建项目 压缩js、css、image、zip、web服务、跨域等插件
推荐一个很好文: https://github.com/lin-xin/blog/issues/2 匹配符 *.**.!.{} gulp.src('./js/*.js') // * 匹配js文件夹下所 ...
- Gulp插件笔记
初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...
随机推荐
- PAT 1004 To Fill or Not to Fill (25)
题目描写叙述 With highways available, driving a car from Hangzhou to any other city is easy. But since the ...
- mysql默认安装目录说明
MySQL安装完成后不象SQL Server默认安装在一个目录,它的数据库文件.配置文件和命令文件分别在不同的目录,了解这些目录非常重要,尤其对于Linux的初学者,因为 Linux本身的目录结构就比 ...
- java萌新尝试搭建WordPress记录
问题1:安装好PHP环境没找好mysql路径,导致不能调用数据库模块 解决方案:重装一次,参考链接 https://www.cnblogs.com/yangxia-test/p/4174372.htm ...
- map对象拷贝问题
map对象赋值: HashMap<String,Object> hm = new HashMap(); HashMap<String,Object> hmCopy = new ...
- iOS 多线程 之 GCD(大中枢派发)(一)
导语: 本文个人原创,转载请注明出处(http://www.cnblogs.com/pretty-guy/p/8126981.html) 在iOS开发中多线程操作通常是一下3种,本文着重介绍Dispa ...
- 《编程人生:15位软件先驱访谈录》【PDF】下载
<编程人生:15位软件先驱访谈录>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382231 内容简介 本书适合所有程序员,也适合 ...
- S7-200以太网通信
一.西门子网络系统 二.s7-200通过以太网模块接入以太网 三.S7-200可以接入的以太网系统 四.S7-200以太网通讯实验 五.实验硬件系统组成 六.S7-200作为服务器的配置 1.进入以太 ...
- 606. Construct String from Binary Tree
You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...
- 在海航云中部署 keepalived
**本文属自我学习,不适合转载** 1. 准备工作 1.1 网络方面的准备工作 1.1.1 创建安全组 注意这里要添加 vrrp 协议支持,否则 keepalived 将无法正常工作. 1.1.2 创 ...
- 3、debian8安装和处理
本博文仅作本人操作过程的记录,留作备忘.自强不息 QQ1222698 本文写于2016年1月10日09:35:45,首先向debian的创始人Ian Murdock表示沉痛惦念! http://bai ...