gulp前端自动化构建工具:常用插件介绍及使用
来源:互联网 发布:视频软件有哪些 编辑:程序博客网 时间:2024/04/30 13:38
Gulp是基于Node.js的一个构建工具(自动任务运行器),开发者可以使用它构建自动化工作流程(前端集成开发环境)。一些常见、重复的任务,例如:网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成。使用它,可以简化工作,让你把重点放在功能开发上;同时减少人为失误,提高开发效率和项目质量,让专注更为专注。如果你之前接触过Grunt,那上手Gulp就会觉得非常容易理解。
github地址:https://github.com/San-Shui/gulp
gulp插件:https://gulpjs.com/plugins/
本项目使用gulp-webserver创建一个静态服务器,gulp-livereload实现网页自动刷新;同时介绍常用的插件以及插件的使用。
- 本地安装
要安装最新版本或特定版本,请运行以下命令之一:
npm install –save-dev gulp
- 全局安装
以下的 NPM 安装方式,将使 gulp 在全局环境下可用:
npm install –global gulp
clone远程仓库到本地:
git clone https://github.com/San-Shui/gulp.git
进入gulp目录
cd gulp
安装依赖
yarn install 或者 npm install
运行项目
gulp
gulp配置文件:
var gulp = require('gulp')// 网页自动刷新(服务器控制客户端同步刷新)var livereload = require('gulp-livereload')// 本地服务器var webserver = require('gulp-webserver')// less文件编译成cssvar less = require('gulp-less') // 压缩css文件var cssmin = require('gulp-clean-css')// 生成sourcemap文件var sourcemaps = require('gulp-sourcemaps')// 当发生异常时提示错误var notify = require('gulp-notify')var plumber = require('gulp-plumber')// 压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作var htmlmin = require('gulp-htmlmin')// 只操作有过修改的文件var changed = require('gulp-changed')// 压缩图片文件(包括PNG、JPEG、GIF和SVG图片)var imagemin = require('gulp-imagemin')// 深度压缩图片var pngquant = require('imagemin-pngquant')// 只压缩修改的图片,没有修改的图片直接从缓存文件读取(C:\Users\Administrator\AppData\Local\Temp\gulp-cache)。var cache = require('gulp-cache')// 给css文件里引用url加版本号var cssver = require('gulp-make-css-url-version')// 压缩javascript文件,减小文件大小var uglify = require('gulp-uglify')// 文件重命名var rename = require('gulp-rename') // 合并javascript文件,减少网络请求var concat = require('gulp-concat')// 文件清理var clean = require('gulp-clean') /** * 使用gulp-less文件编译成css */gulp.task('lessTask', function() { gulp.src('src/less/*.less') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(sourcemaps.init({loadMaps: true})) .pipe(rename({ suffix: '.min' })) // 重命名 .pipe(less()) // 将less文件编译成css .pipe(cssmin()) // 压缩css .pipe(sourcemaps.write('./')) .pipe(gulp.dest('dist/css')) // 将会在dist/css下生成index.css})/** * watch监测less文件的改变 */gulp.task('lessWatch', function () { gulp.watch('src/**/*.less', ['lessTask']); // 当src文件或者子文件下的某个less文件发生改变时,调用lessTask任务});/** * 使用gulp-htmlmin压缩html */gulp.task('htmlminTask', 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 }; var stream = gulp.src('src/*.html') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(changed('dist')) .pipe(htmlmin(options)) .pipe(gulp.dest('dist')) return stream})/** * 使用gulp-imagemin压缩图片 */gulp.task('imageminTask', function () { var option = { optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: false, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: false //类型:Boolean 默认:false 多次优化svg直到完全优化 } gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(imagemin(option)) .pipe(gulp.dest('dist/img'))})/** * 使用imagemin-pngquant深度压缩图片 */gulp.task('pngquantTask', function () { gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(changed('dist/img')) .pipe(imagemin({ progressive: true,// 无损压缩JPG图片 svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性 use: [pngquant()] // 使用pngquant深度压缩png图片的imagemin插件 })) .pipe(gulp.dest('dist/img'));})/** * 使用gulp-cache只压缩修改的图片 */gulp.task('cacheTask', function () { gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(changed('dist/img')) .pipe(cache(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] }))) .pipe(gulp.dest('dist/img'));})/** * 使用gulp-clean-css压缩css文件 */gulp.task('cssminTask', function() { var option = { advanced: true,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式] keepBreaks: false,//类型:Boolean 默认:false [是否保留换行] keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀 } gulp.src('src/css/*.css') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(cssmin(option)) // 压缩css .pipe(gulp.dest('dist/css')) // 将会在dist/css下生成index.css})/** * 使用gulp-make-css-url-version给css文件里引用url加版本号 */gulp.task('cssverTask', function () { gulp.src('src/css/*.css') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(sourcemaps.init()) // 执行sourcemaps .pipe(rename({ suffix: '.min' })) // 重命名 .pipe(cssver()) //给css文件里引用文件加版本号(文件MD5) .pipe(cssmin()) .pipe(sourcemaps.write('./')) // 地图输出路径(存放位置) .pipe(gulp.dest('dist/css'));})/** * 使用gulp-uglify压缩javascript文件,减小文件大小。 */gulp.task('uglifyTask', function () { gulp.src(['src/js/*.js', '!src/js/**/scrollspy.js']) .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(changed('dist/js')) // 对应匹配的文件 .pipe(sourcemaps.init()) // 执行sourcemaps .pipe(rename({ suffix: '.min' })) // 重命名 .pipe(uglify()) // 使用uglify进行压缩,并保留部分注释 .pipe(sourcemaps.write('./')) // 地图输出路径(存放位置) .pipe(gulp.dest('dist/js'));});/** * 使用gulp-concat合并javascript文件,减少网络请求。 */gulp.task('concatTask', function () { gulp.src(['dist/js/*.js']) .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示 .pipe(concat('concatLibs.js')) // 合并成libs.js .pipe(rename({ suffix: '.min' })) // 重命名 .pipe(gulp.dest('dist/js'))})/** * 文件复制 */gulp.task('copyTask', function () { gulp.src('src/fonts/*') .pipe(gulp.dest('dist/fonts'))})/** * 清理文件 */gulp.task('cleanTask', function() { var stream = gulp.src( 'dist', {read: false} ) // 清理maps文件 .pipe(clean()) return stream})/** * 注册任务 */gulp.task('webserver', ['htmlminTask'], function() { gulp.src( 'dist' ) // 服务器目录(./代表根目录) .pipe(webserver({ // 运行gulp-webserver livereload: true, // 启用LiveReload open: 'index.html', // 服务器启动时自动打开网页 port: 8089 // 服务端口 }))})/** * 监听任务 */gulp.task('watch', function(){ // 监听 less gulp.watch( 'src/less/*.less' , ['lessTask']) // 监听 html gulp.watch( 'src/*.html' , ['htmlminTask']) // 监听 images gulp.watch( 'src/img/*.{png,jpg,gif,ico}' , ['pngquantTask']) // 监听 js gulp.watch( ['src/js/*.js','!src/js/*.min.js'] , ['uglifyTask']) // 监听 css gulp.watch( 'src/css/*.css' , ['cssverTask'])})/** * 默认任务 */gulp.task('default',[ 'htmlminTask', 'copyTask', 'cssverTask', 'uglifyTask', 'cacheTask', 'lessTask', 'webserver', 'watch'])
运行之后会生成一个dist目录,dist目录下的文件是通过配置gulp自动生成。
修改src目录下的任何文件都会自动刷新网页
插件汇总
1、编译
- gulp-sass - 通过 libsass将Sass编译成 CSS
- gulp-ruby-sass - 通过 Ruby Sass将Sass编译成CSS
- gulp-compass - 通过 Ruby Sass和CompassSass编译成CSS
- gulp-less - Less编译成 CSS.
- gulp-stylus - Stylus 编译成 CSS.
- gulp-postcss - Pipe CSS 通过 PostCSS processors with a single parse.
- gulp-coffee - Coffeescript 编译成 JavaScript.
- gulp-typescript - TypeScript编译成JavaScript.
- gulp-react - Facebook React JSX 模板编译成JavaScript.
- webpack-stream - 将webpack集成在Gulp中使用。
- gulp-babel - ES6编译成ES5 通过 babel.
- gulp-traceur - ES6编译成ES5 通过 Traceur.
- gulp-regenerator - ES6编译成ES5 通过 Regenerator.
- gulp-es6-transpiler - [过时的] ES6编译成ES5 通过 es6-transpiler.
- gulp-myth - Myth - a polyfill for future versions of the CSS spec.
- gulp-cssnext - [过时的] 使用下一代的 CSS 规范通过 cssnext.
2、合并
- gulp-concat - 合并文件. -
3、压缩
- gulp-clean-css - 压缩 CSS 通过 clean-css.
- gulp-csso - 压缩 CSS 通过 CSSO.
- gulp-uglify - 压缩 JavaScript 通过 UglifyJS2.
- gulp-htmlmin - 压缩 HTML 通过 html-minifier.
- gulp-minify-html - 压缩 HTML 通过 Minimize.
- gulp-imagemin - 压缩 PNG, JPEG, GIF and SVG 图片 通过 imagemin.
- gulp-svgmin - 通过Gulp压缩 SVG 文件
4、优化
- gulp-uncss - 移除未使用的CSS选择器通过 UnCSS.
- gulp-css-base64 - 将CSS文件中所有的资源(有url()声明的)变成base64-encoded 数据的URI字符串
- gulp-svg2png - 将SVGs转换成PNGs
- gulp-responsive - 生成不同尺寸的图片
- gulp-svgstore -将svg files 合并成一个通过 元素
- gulp-iconfont - 通过SVG icons创建 icon fonts
5、资源注入
- gulp-useref - 解析HTML文件中特殊标签里面的script或style标签,合并成一个script或css文件,并替换。
- gulp-inject - 将指定的css或js文件以标签的形式插入到HTML中的指定标志内。
- wiredep - 将Bower依赖自动注入HTML文件中。
6、模板
- gulp-angular-templatecache - 在$templateCache中联系并注册AngularJS模板
- gulp-jade - Jade 转换成 HTML.
- gulp-handlebars - Handlebars模板转换成 JavaScript.
- gulp-hb - Handlebars 模板转换成 HTML.
- gulp-nunjucks - Nunjucks模板转换成JavaScript.
- gulp-dustjs - Dust模板转换成JavaScript.
- gulp-riot - Riot模板转换成JavaScript.
- gulp-markdown - Markdown → HTML.
- gulp-template - Lodash 模板转换成JavaScript.
- gulp-swig - Swig模板转换成HTML.
- gulp-remark - Gulp plugin for [remark]的Gulp插件(https://github.com/wooorm/remark) 通过插件处理markdown
7、代码校验
- gulp-csslint - 通过CSSLint自动校验CSS.
- gulp-htmlhint - 通过HTMLHint校验HTML.
- gulp-jshint - 通过JSHint发现错误和潜在的问题.
- gulp-jscs - 通过jscs检查JavaScript代码风格.
- gulp-coffeelint - 一种用来保证CoffeeScript代码风格统一的检查。
- gulp-tslint - gulp的TypeScript代码校验插件.
- gulp-eslint - ECMAScript/JavaScript代码校验.
- gulp-w3cjs - 通过w3cjs检验HTML.
- gulp-lesshint - 通过lesshint校验LESS.
8、实时加载
- browser-sync - 保证多个浏览器或设备网页同步显示 (recipes).
- gulp-livereload - Gulp的实时加载插件.
9、缓存
- gulp-changed - 仅让发生改变的文件通过.
- gulp-cached - 一个简单的文件内存缓存.
- gulp-remember - 记忆并回收通过了的文件.
- gulp-newer - 只让新的源码通过.
10、流控制
- merge-stream - 合并多个流到一个插入的流.
- streamqueue - 逐渐输入队列的流.
- run-sequence - 按要求运行一些依赖的Gulptask.
- gulp-if - 按照条件运行task.
11、日志
- gulp-notify - Gulp的通知插件.
- gulp-size - 显示你的项目的大小.
- gulp-debug - 通过调试文件流来观察那些文件通过了你的Gulp管道.
12、测试
- gulp-mocha - 运行Mocha测试用例.
- gulp-jasmine - 在Node.js中运行Jasmine 2 测试用例.
- gulp-protractor - 为Protractor测试用例包裹Gulp.
- gulp-coverage - 为Node.js覆盖相对于运行的测试运行独立的报告.
- gulp-karma - 通过Gulp运行Karma测试用例.
- gulp-ava- 通过Gulp运行AVA 测试用例.
13、其他插件
- gulp-util - 包含一系列有用插件.
- gulp-plumber - 防止错误引起管道中断Prevent pipe breaking caused by errors.
- gulp-load-plugins - 自动加载Gulp插件.
- main-bower-files - 构建时自动获取bower库的文件.
- autoprefixer - 解析CSS且根据规则添加浏览器兼容性前缀.
- gulp-sourcemaps - 提供source map支持.
- gulp-replace - Gulp的一个字符串替换插件.
- gulp-rename - 轻松重命名文件.
- gulp-rev - 在静态文件名的后面添加hash值,如: unicorn.css → unicorn-d41d8cd98f.css.
- del - 使用globs删除文件/文件夹.
- gulp-exec - 运行一个shell命令.
- gulp-strip-debug - 除去javascript代码中的console,alert,debugger声明.
- gulp-cssimport - 解析CSS文件,找到imports,将连接文件替换成imort声明.
- gulp-inline-css - 将HTML中的css属性放到style标签中.
- gulp-gh-pages - 将内容发布到GiHub有页面.
- gulp-ng-annotate - 通过ng-annotate添加Angular依赖注入.
- gulp-bump - 通过Gulp Bump任何semvar JSON版本.
- gulp-file-include - 通过Gulp Include文件.
- gulp-zip - 以ZIP格式压缩文件.
- gulp-git - 通过Gulp运行git命令.
- gulp-filter - 使用globbing过滤文件.
gulp-preprocess - 基于自定义内容或环境配置预处理文件.
参考链接:http://www.cnblogs.com/-ding/p/5972162.html
- gulp前端自动化构建工具:常用插件介绍及使用
- Gulp构建前端自动化工作流之:常用插件介绍及使用
- Gulp前端自动化构建工具介绍及入门
- gulp前端自动化构建工具(二):gulp插件/gulp模块介绍
- 前端自动化Gulp工具常用插件
- 前端构建工具gulp的使用介绍及重点
- 前端自动化构建工具gulp
- gulp --- 前端自动化构建工具
- 前端自动化构建工具--gulp
- gulp前端自动化构建工具(一):工具介绍和使用
- 使用Gulp构建前端自动化
- 前端自动化构建工具gulp使用指南
- gulp.js-前端自动化构建工具
- 前端自动化构建工具----gulp安装教程
- gulp+nginx—前端自动化构建工具
- gulp前端自动化构建工具新手入门篇
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- gulp前端自动化构建工具(三):gulp工具配置文件
- ffmpeg优雅的添加代码
- 西安赛区 C-Sum
- Redis 简介及安装配置
- 缓存淘汰算法
- 通过jsp实现验证码
- gulp前端自动化构建工具:常用插件介绍及使用
- 如何获得C币
- 序列化(层序遍历)
- Linux 命令行获取文件或目录的大小
- NIO之Reactor
- 7624:山区建小学
- 笔试选择题知识点(一)
- vue添加axios,并且指定baseurl
- buntu安装JDK1.8.0_25与配置环境变量