使用gulp构建前端（三）

为什么80%的码农都做不了架构师？>>>

使用gulp构建前端（三）

紧接着上述文章内容，开始新的插件的使用

插件三

gulp-clean-css，作用减小文件大小，并给引用url添加版本号避免缓存，一个需要注意的是很多同学如果看到一些比较老的版本就可能会使用，gulp-minify-css，实际上，后者已经没人维护了，不过两者用法基本上是一致的。

还是一样的先安装

npm install gulp-clean-css --save-dev

然后编写gulpfile.js文件

var gulp = require('gulp'), //本地安装gulp所用到的地方cssmin =require('gulp-clean-css');gulp.task('css',function(){return  gulp.src('source/css/*.css').pipe(cssmin()).pipe(gulp.dest('build/css'));
});gulp.task('default', ['css']);

然后编写css文件

.box {color: #fe33ac;border-color: #fdcdea;
}
.......
其他代码内容

执行gulp命令，压缩效果达到：5-6倍（不过只是一个简单的测试，不服责任系列哈）

插件四

gulp-uglify，作用minjs文件

安装插件 gulp-uglify

npm install gulp-uglify --save-dev

编写gulpfile.js文件

var gulp = require('gulp'), //本地安装gulp所用到的地方jsmin = require('gulp-uglify'),;gulp.task('js',function(){return gulp.src('source/js/*.js').pipe(jsmin()).pipe(gulp.dest('build/js'));});
gulp.task('default', ['js']);

编写js文件执行gulp，min结果一般

插件3的github地址：https://github.com/scniro/gulp-clean-css

插件4的github地址：https://github.com/terinjokes/gulp-uglify

转载于:https://my.oschina.net/QAAQ/blog/707858

使用gulp构建前端（三）相关推荐

Gulp构建前端自动化工作流
## Gulp构建前端自动化工作流 ### Gulp构建前端自动化工作流之:常用插件介绍及使用在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: ...
用gulp构建你的前端项目
前言前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
摘要: 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建刚开始打算进行前后端分离开发,后来发现在使用JSP或者Freemarker做动态页面时,想发挥这些自动化构建工具 ...
构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
构建一个基本的前端自动化开发环境 -- 基于 Gulp 的前端集成解决方案(四) 参考文章: (1)构建一个基本的前端自动化开发环境 -- 基于 Gulp 的前端集成解决方案(四) (2)https: ...
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
一.gulp.watch()功能介绍举例说明:当'./src/*.html'发生变化时,执行'html'任务,同时刷新浏览器.如下: gulp.task('watch', function(){gu ...
gulp+PC前端静态页面项目开发
前言: 现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地 gulp构建前言: 如今我们开发web网页的方式主要有几种,使用vue-cli.create-react- ...
thinkphp整合系列之gulp实现前端自动化
这又是一个一次整合终身受益:不止是终身:换个项目同样可以很方便复用:不信你看另一个项目: thinkphp整合系列之gulp实现前端自动化虽然我等叫php程序猿:但是不可避免的是要跟html打交道的 ...
Gulp构建Angularjs应用
使用Gulp构建Angularjs应用的缘由 2016在前端已经大热的今年也决定跟上时代的步伐进入前端自动化的行列,刚好公司框架采用的是angularjs,css采用的是scss预编译语言,所谓做事三 ...
（34）Gulp 构建HTML页面文件
一.Gulp 构建HTML页面文件概述我们的HTML文件将来再做大型项目时,文件HTML结构代码也是很多的,上传到服务器上线时也是有缓慢压力和内存占用较大的情况的,所以我们为了解决该问题,还需要对H ...

使用gulp构建前端（三）

使用gulp构建前端（三）相关推荐

最新文章

热门文章