gulp常用插件总结
近期在学习使用gulp,通过写这篇总结文章,让自己加深对gulp常用插件的印象。
1. gulp-refresh
插件地址:gulp-refresh
注:1.该插件需要配合Chrome浏览器的扩展程序LiveReload使用。
2.测试文件需要在服务器上打开。
3.将LiveReload的空心圈点击成实心圈。
插件作用:实现浏览器自动刷新。
使用方法:1.安装gulp-refresh 2.安装完成以后,在gulpfile.js文件中引用。
npm install --save-dev gulp-refresh
var gulp = require('gulp'),refresh = require('gulp-refresh');
gulp.task('refresh', function() {return gulp.src('app.html').pipe(refresh());
});
gulp.task('watch', function() {refresh.listen();gulp.watch('app.html', ['refresh']);
});
3.运行gulp watch,执行任务(task):watch,监听app.html文件。当文件保存时,执行任务(task):refresh,重新加载app.html,浏览器通过LiveReload监听,实现浏览器自动刷新。
2. gulp-htmlmin
插件地址:gulp-htmlmin
插件作用:压缩html文件。
使用方法:1.安装gulp-htmlmin 2.安装完成以后,在gulpfile.js文件中引用。
npm install --save-dev gulp-htmlmin
var gulp = require('gulp'),htmlmin = require('gulp-htmlmin');
gulp.task('minify-html', function() {return gulp.src('app.html') // 源文件.pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest('dist')); // 压缩后的文件放到该路径下
});
3.运行gulp minify-html,对文件进行压缩。
4.压缩后的路径和文件
3. gulp-clean-css
插件地址:gulp-clean-css
插件作用:压缩css文件。
使用方法:1.安装gulp-clean-css 2.安装完成以后,在gulpfile.js文件中引用。
npm install --save-dev gulp-clean-css
var gulp = require('gulp'),cleanCss = require('gulp-clean-css');
gulp.task('minify-css', function() {return gulp.src('css/*.css') // 选中css文件夹下的所有css文件.pipe(cleanCss({compatibility: true})).pipe(gulp.dest('dist/css')); // 压缩后的文件放到该路径下
});
3.运行gulp minify-css,对文件进行压缩。
4.压缩后的路径和文件。
4. gulp-uglify
插件地址:gulp-uglify
插件作用:压缩js文件。
使用方法:1.安装gulp-uglify 2.安装完成以后,在gulpfile.js文件中引用。
npm install --save-dev gulp-uglify
var gulp = require('gulp'),uglify = require('gulp-uglify');
gulp.task('minify-js', function() {return gulp.src('js/*.js') // 选中js文件夹下的所有js文件.pipe(uglify()).pipe(gulp.dest('dist/js')); // 压缩后的文件放到该路径下
});
3.运行gulp minify-js,对文件进行压缩。
4.压缩后的路径和文件
5.gulp-rename
插件地址:gulp-rename
插件作用:重命名文件。
使用方法:1.安装gulp-rename 2.安装完成以后,在gulpfile.js文件中引用。
npm install --save-dev gulp-rename
var gulp = require('gulp'),rename = require('gulp-rename');
gulp.task('rename', function() {return gulp.src('app.text') // 选中要修改名字的文件.pipe(rename({dirname: 'text/rename', // 路径名basename: 'filename', // 文件名()prefix: 'prefix-', // 文件名前缀suffix: '-suffix', // 文件名后缀extname: '.md', // 文件扩展名})).pipe(gulp.dest('dist')); // 修改完成的文件放到该路径下// 最终文件rename后路径为: ./dist/text/rename/prefix-filename-suffix.md
});
3.运行gulp-rename,重命名文件。
4.重命名后的文件名和路径。
6.gulp-concat
插件地址:gulp-concat
插件作用:将多个文件合并为一个文件。
使用方法:1.安装gulp-concat 2.安装完成以后,在gulpfile.js文件中引用。
npm install --save-dev gulp-concat
var gulp = require('gulp'),concat = require('gulp-concat');
gulp.task('concat', function() {return gulp.src('js/*.js') // 选中js文件卡下的所有js文件.pipe(concat('all.js')) // 将选中的文件合并成一个文件 all.js.pipe(gulp.dest('dist')); // 将文件放到该路径下
});
3.运行gulp-concat,合并文件。
4.合并后的文件
7.gulp-autoprefixer
插件地址:gulp-autoprefixer
插件作用:自动添加css浏览器前缀。
使用方法:1.安装gulp-autoprefixer 2.安装完成以后,在gulpfile.js文件中引用。
npm install --save-dev gulp-autoprefixer
var gulp = require('gulp'),autoprefixer = require('gulp-autoprefixer');
gulp.task('autoprefix', function() {return gulp.src('css/*.css') // 选中css文件夹下的所有文件.pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false})).pipe(gulp.dest('dist/css')); // 将文件放到该路径下
});
3.运行gulp autoprefix
4.生成文件
综合使用
这里将综合使用多个插件,能更加理解gulp基于流的概念。
var gulp = require('gulp'),concat = require('gulp-concat'),sass = require('gulp-sass'),cleanCss = require('gulp-clean-css'),autoprefixer = require('gulp-autoprefixer'),rename = require('gulp-rename');
gulp.task('test', function() {gulp.src('sass/*.scss') // 选中sass文件夹下的所有scss文件.pipe(concat('all.scss')) // 合并成all.scss.pipe(sass().on('error', sass.logError)) // .scss => .css.pipe(autoprefixer({ // 添加浏览器前缀browsers: ['last 2 versions'],cascade: false})).pipe(cleanCss({ compatibility: 'ie8' })) // 压缩css.pipe(rename({ suffix: '.min' })) // 重命名css all.css => all.min.css.pipe(gulp.dest('dist/css/')); // 保存到该目录下
});
源文件。
运行gulp test,生成路径和all.min.css 文件。
最后附上gulp插件仓库的地址:gulp.js plugin registry
希望这篇文章对您有帮助,谢谢。
End!
gulp常用插件总结相关推荐
- gulp 常用插件汇总
2017-07-26更新:图片压缩插件使用gulp-smushit,gulp-smushit压缩率比较大,gulp-imagemin 图片压缩插件压缩率不明显. 见下图压缩率: 1.gulp安装 参照 ...
- 浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作
写在前面: 因为gulp是一个基于node的工具,所以我们需要先安装node,具体可见[node的安装及配置] 目录 一.gulp简介 二.gulp基本使用 1. 创建项目 2. gulp的安装 3. ...
- gulp plugins 插件介绍
原文:http://ju.outofmemory.cn/entry/103253 鸟窝 2014-11-28 3020 阅读 gulp Gulp是一个构建工具, 功能类似grunt, 以及Java生态 ...
- vscode html注释快捷键_VSCode 的快捷键及常用插件总结
1.注释: · 单行注释:ctrl+/, 注释后再按取消 · 取消单行注释:alt+shift+A 注释后再按取消 2.移动行 · 向上移动一行:alt+up · 向下移动一行:alt+down 3. ...
- PostCSS及其常用插件介绍
前几天,PostCSS 6.0 分布了. PostCSS 处理了很多你不必处理的乏味工作.它很巧妙的不同于预处理器,提供了可选的且更简洁的编程语言,来编译成 CSS,如 Sass.Less 与 Sty ...
- Sublime Text 3便携版下载安装和常用插件安装--顺便解决报错An error occured installing和no packages available for install
文章目录 Sublime Text 3便携版下载安装和常用插件安装 1.Sublime Text 3便携版下载: 2.sublime 插件控制器(Package Control)安装 2.1离线安装P ...
- Flutter开发之常用插件安装与卸载(11)
和大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件. VS Code 左侧菜单栏处箭头 1 处:打开Extensions MarketPlace 使用搜索功能 ...
- maven 常用插件3
maven 常用插件3 转载:http://www.cnblogs.com/dennyzhangdd/p/5831112.html 1.根据项目类型打包:jar/war打包插件. 首先看<pac ...
- vscode使用汇总——常用插件、常用配置、常用快捷键
一.代码提示快捷键设置:(keybindings.json) [{"key": "ctrl+j","command": "-wor ...
最新文章
- Ghost 系统的过程
- ECMAScript+DOM+BOM
- bilibili在线解析接口_SpringBoot+Gradle+MyBatisPlus3.x + Swagger搭建在线和离线API
- brew 镜像_Docker牛刀小试:安装及常用的镜像命令和容器命令
- c++中的new_怎么在java中创建一个自定义的collector
- 【英语学习】【WOTD】substantive 释义/词源/示例
- Json转化的三种方式
- iPhone企业应用实例分析之三:程序框架分析
- apache.commons.beanutils javabean转MapStirng,String对象
- Spring Boot 集成 Thymeleaf 快速入门、静态资源映射规则、WebJars
- c语言switch编写个人所得税,C语言编写一个计算个人所得税的程序,要求输入收入金额,能够输...
- 桌面无法显示计算机,win10 桌面计算机无法显示
- Python——数据结构——图——邻接矩阵
- 科学计算机怎么算四分位数,科学网—四分位数间距 - 贺小星的博文
- 【C语言】字符串数组按字典升序
- 手机上好用的apm测试软件,在哪才能找到测apm的软件 及如合使用 – 手机爱问...
- 解决页面刷新数据丢失,数据持久化问题
- 钙钛矿Cs2AgBiBr6|三氟乙胺碘F3EAI|4-三氟甲基苯胺溴CF3PhABr
- 后台结束AlibabaProtect.exe
- php微信 开发笔记,PHP微信公众开发笔记(一)
热门文章
- python加法怎么写_51NOD 大数加法以及python写法
- 启动定时器t0的工作指令是_第六章 习题
- iview template模式_使用Iview Menu 导航菜单(非 template/render 模式)
- linux系统下创建symlink(@)即文件软链接(快捷方式)的命令
- python #!/usr/bin/python作用
- java文件没反应_Java实现文件点击没反应的方法
- 小程序返回上一页_智能小程序档案馆手把手教你成为小程序流量头号玩家(上)...
- thinkphp长连接MySQL_ThinkPHP3.2.3---mysql+ajax实现长连接,实时监测数据库数据是否更新...
- Leetcode69场双周赛-第四题5931. 用邮票贴满网格图
- 【软考】信息系统项目管理师--知识点