gulp插件简介
2017-02-24 22:23
246 查看
1.gulp-sass
编译sasscnpm install gulp-sass –save-dev
3.2.1、:node插件名称。例:npm install gulp-less –save-dev
3.2.2、-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量; 非全局安装:将会安装在当前定位目录; 全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;
3.2.3、–save:将保存配置信息至package.json(package.json是nodejs项目配置文件);
3.2.4、-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。
3.2.5、为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包,npm install –production只下载dependencies节点的包)。
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src('./sass/**/*.scss') .pipe(sass().on('error', sass.logError)) //sass()编译 .pipe(gulp.dest('./css')); }); gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); //监听sass文件,发生变化执行数组里的任务'sass',即再次编译,转化为css });
2.gulp-uglify
压缩javascript文件var gulp = require('gulp'), uglify = require('gulp-uglify'); gulp.task('jsmin', function () { gulp.src('src/js/index.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')); });
var gulp = require('gulp'), uglify= require('gulp-uglify'); gulp.task('jsmin', function () { //压缩src/js目录下的所有js文件 //除了test1.js和test2.js(**匹配src/js的0个或多个子文件夹) gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js']) .pipe(uglify()) .pipe(gulp.dest('dist/js')); });
var gulp = require('gulp'), uglify= require('gulp-uglify'); gulp.task('jsmin', function () { gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js']) .pipe(uglify({ mangle: true,//类型:Boolean 默认:true 是否修改变量名 compress: true,//类型:Boolean 默认:true 是否完全压缩 preserveComments: 'all' //保留所有注释 })) .pipe(gulp.dest('dist/js')); });
最后执行 gulp jsmin
3.gulp-concat
合并javascript文件,减少网络请求cnpm install gulp-concat –save-dev
var gulp = require('gulp'), concat = require('gulp-concat'); gulp.task('testConcat', function () { gulp.src('src/js/*.js') .pipe(concat('all.js'))//合并后的文件名 .pipe(gulp.dest('dist/js')); });
4.gulp-htmlmin
压缩html,可以压缩页面js+css,去除页面空格、注释、删除多余属性cnpm install gulp-htmlmin –save-dev
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')); });
5.gulp-clean-css
注意:gulp-minify-css已经弃用var gulp = require('gulp'), cssmin = require('gulp-clean-css'); gulp.task('testCssmin', function () { gulp.src('src/css/*.css') .pipe(cssmin({ advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式] keepBreaks: true,//类型:Boolean 默认:false [是否保留换行] keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀 })) .pipe(gulp.dest('dist/css')); });
给css文件里引用的url加版本号
var gulp = require('gulp'), cssmin = require('gulp-clean-css'); //确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev] cssver = require('gulp-make-css-url-version'); gulp.task('testCssmin', function () { gulp.src('src/css/*.css') .pipe(cssver()) //给css文件里引用文件加版本号(文件MD5) .pipe(cssmin()) .pipe(gulp.dest('dist/css')); });
6.gulp-imagemin
压缩图片文件var gulp = require('gulp'), imagemin = require('gulp-imagemin'); gulp.task('testImagemin', function () { gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(imagemin({ optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest('dist/img')); });
7.gulp-rev-append
给页面的引用添加版本号,清除页面引用缓存var gulp = require('gulp'), rev = require('gulp-rev-append'); gulp.task('testRev', function () { gulp.src('src/html/index.html') .pipe(rev()) .pipe(gulp.dest('dist/html')); });
8.gulp-rev-collector
给资源文件加时间戳我们可以使用gulp-rev来产生一些无法使用cache的静态资源, 并且为它们生成manifest文件. 然后使用gulp-rev-collector来从manifest文件中收集数据并且替换html模板中的链接.
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
var revCollector = require('gulp-rev-collector'); gulp.task('rev-collector', function () { gulp.src(['dist/rev-manifest.json', './src/views/**/*']) .pipe(revCollector()) .pipe(gulp.dest('dist/views')); });
9.gulp-autoprefixer
根据设置浏览器版本自动处理浏览器前缀var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'); gulp.task('testAutoFx', function () { gulp.src('src/css/index.css') .pipe(autoprefixer({ browsers: ['last 2 versions', 'Android >= 4.0'], cascade: true, //是否美化属性值 默认:true 像这样: //-webkit-transform: rotate(45deg); // transform: rotate(45deg); remove:true //是否去掉不必要的前缀 默认:true })) .pipe(gulp.dest('dist/css')); });
browsers参数详解
● last 2 versions: 主流浏览器的最新两个版本
● last 1 Chrome versions: 谷歌浏览器的最新版本
● last 2 Explorer versions: IE的最新两个版本
● last 3 Safari versions: 苹果浏览器最新三个版本
● Firefox >= 20: 火狐浏览器的版本大于或等于20
● iOS 7: IOS7版本
● Firefox ESR: 最新ESR版本的火狐
● 5%: 全球统计有超过5%的使用率
相关文章推荐
- Gulp简介及一些常用插件介绍
- jquery之表单插件(简介)
- Mybatis插件PageHelper 4.0版本中PageInfo简介
- 精通gulp常用插件
- 对Photoshop第三方滤镜插件开发的简介
- gstreamer插件简介
- gulp自动刷新插件
- gulp常用插件
- 精品教程:Eclipse JyDT 插件简介
- jquery 图形报表插件jqplot 简介及参数详解
- 如何编写一个gulp插件
- Gulp插件笔记
- gulp前端自动化构建工具(二):gulp插件/gulp模块介绍
- jQuery扩展 插件制作简介
- Gulp插件less的使用
- 精通gulp常用插件
- 7.1.1: jQuery表单验证插件Validation简介
- gulp插件
- cacti插件简介
- gulp常用插件