angular gulp gulpfile.js

最新推荐文章于 2022-02-12 21:44:54 发布

z__a

最新推荐文章于 2022-02-12 21:44:54 发布

阅读量501

点赞数

分类专栏： js 日常随笔文章标签： angular

本文链接：https://blog.csdn.net/zhang__ao/article/details/79853412

版权

日常随笔同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

gulp-htmlmin：压缩html文件
gulp-imagemin：压缩图片
imagemin-pngquant：深度压缩png图片
gulp-cache：只压缩修改的图片
gulp-minify-css：压缩CSS文件
gulp-make-css-url-version：给css文件引用文件加版本号(文件MD5)
gulp-rev-append：通过正则(?:href|src)=”(.*)[?]rev=(.*)[“]查找并给指定链接填加版本号（默认根据文件MD5生成，因此文件未发生改变，此版本号将不会变）
gulp-uglify：使用gulp-uglify压缩javascript文件，减小文件大小
gulp-concat：使用gulp-concat合并javascript文件，减少网络请求
gulp-autoprefixer：根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】
gulp-less：
gulp-livereload：当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力。

详细讲解以上命令：

gulp-htmlmin：压缩html文件

- 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 checked/>

- 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'));

- });

2. 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')); 
 
   - });

3. imagemin-pngquant：深度压缩png图片

   - var gulp = require('gulp'), 
 
   - pngquant = require('imagemin-pngquant')； 
 
   - gulp.task('testImagemin',function(){ 
 
   -   gulp.src('src/img/*.{png,jpg,gif,ico}') 
 
   -   .pipe(imagemin({ 
 
   -   progressive:true, 
 
   -   svgoPlugins:[{removeViewBox:false}], //不要移除svg的viewbox属性 
 
   -   use:[pngquant()] //使用pangquant深度压缩png图片的imagemin插件 
 
   -   })) 
 
   -   .pipe(gulp.dest('dist/img')); 
 
   - });

4. gulp-cache：只压缩修改的图片

   - var gulp = require('gulp'), 
 
   - cache = require('gulp-cache'); 
 
   - gulp.task('testImagemin',function(){ 
 
   -   gulp.src('src/img/*.{png,jpg,gif,ico}') 
 
   -   .pipe(cache(imagemin({ 
 
   -   progressive:true, 
 
   -   svgoPlugins:[{removeViewBox:false}], 
 
   -   use:[pngquant()] 
 
   -   }))) 
 
   -   .pipe(gulp.dest('dist/img')); 
 
   - });

5 .gulp-minify-css：压缩CSS文件； gulp-make-css-url-version：给css文件引用文件加版本号(文件MD5)

- var gulp = require('gulp'),

- cssmin = require('gulp-minify-css')；

- gulp.task('testCssmin',function(){

- gulp.src('src/css/*.css')

- .pipe(cssver()) //给css文件引用文件加版本号(文件MD5)

- .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'));

- });

6. gulp-rev-append：通过正则(?:href|src)=”(.*)[?]rev=(.*)[“]查找并给指定链接填加版本号（默认根据文件MD5生成，因此文件未发生改变，此版本号将不会变）

   - var gulp = require('gulp')； 
 
   - var rev = require('gulp-rev-append'); 
 
   - gulp.task('testRev',function(){ 
 
   -   gulp.src('src/html/html3.html') 
 
   -   .pipe(rev()) 
 
   -   .pipe(gulp.dest('dist/html')) 
 
   - }); 
 
   - gulp

7 .uglify：使用gulp-uglify压缩javascript文件，减小文件大小

   - var gulp = require('gulp'), 
 
   - uglify = require('gulp-uglify'); 
 
   - gulp.task('jsmin',function(){ 
 
   -   gulp.src(['src/js/*.js','!dist/js/**/{test1,test2}.js']) 
 
   -   .pipe(uglify({ 
 
   -   mangle:{toplevel:true} ,//类型：Boolean 默认：true 是否修改变量名 
 
   -   compress: true, //类型：Boolean 默认：true 是否完全压缩 
 
   -   //preserveComments: 'all' //保留所有注释 ????? 
 
   -   })) 
 
   -   .pipe(gulp.dest('dist/js')); 
 
   - });

8. gulp-concat：使用gulp-concat合并javascript文件，减少网络请求

   - 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')); 
 
   - });

9. gulp-autoprefixer：根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】

   - var gulp = require('gulp'), 
 
   - autoprefixer = require('gulp-autoprefixer'); 
 
   - gulp.task('testAutoFx',function(){ 
 
   -   gulp.src('src/css/css3.css') 
 
   -   .pipe(autoprefixer({ 
 
   -   browsers:['last 5 versions','Android >= 4.0'], 
 
   -   cascade:true, //是否美化属性值 默认：true 像这样： 
 
   -   //-webkit-transform: rotate(45deg); 
 
   -   // transform: rotate(45deg); 
 
   -   remove:true //是否去掉不必要的前缀 默认：true 
 
   -   })) 
 
   -   .pipe(gulp.dest('dist/css')); 
 
   -   //gulp-autoprefixer的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%的使用率； 
 
   -   */ 
 
     //各浏览器的标识： 
 
     /* 
 
     Android: for Android WebView; 
 
     BlackBerry or bb: for Blackberry browser; 
 
     Chrome: for Google Chrome; 
 
     Firefox or ff: for Mozilla Firefox; 
 
     Explorer or ie: for Internet Explorer; 
 
     iOS or ios_saf: for iOS Safari; 
 
     Opera: for Opera; 
 
     Safari: for desktop Safari; 
 
     OperaMobile or op_mob: for Opera Mobile; 
 
     OperaMini or op_mini: for Opera Mini; 
 
     ChromeAndroid or and_chr; 
 
     FirefoxAndroid or and_ff: for Firefox for Android; 
 
     ExplorerMobile or ie_mob: for Internet Explorer Mobile. 
 
     */ 
 
   });

10 gulp-less；gulp-livereload：当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力。

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