压缩 css 代码可降低 css 文件大小,提高页面打开速度。

规律转换为 gulp 代码

找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下。
一、安装 gulp-minify-css 模块

提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作。

在命令行输入 sudo npm install gulp-minify-css

安装成功后,命令行显示如下内容:

E:\workSpace\bulingbuling>npm install gulp-minify-css
npm WARN deprecated gulp-minify-css@1.2.: Please use gulp-clean-css
E:\workSpace\bulingbuling
`-- gulp-minify-css@1.2.
+-- clean-css@3.4.
| +-- commander@2.8.
| | `-- graceful-readlink@1.0.
| `-- source-map@0.4.
| `-- amdefine@1.0.
+-- object-assign@4.1.
+-- readable-stream@2.3.
| +-- isarray@1.0.
| `-- string_decoder@1.0.
+-- vinyl-bufferstream@1.0.
| `-- bufferstreams@1.0.
`-- vinyl-sourcemaps-apply@0.2.
`-- source-map@0.5. npm WARN bulingbuling No description
npm WARN bulingbuling No repository field.
npm WARN bulingbuling No license field.

二、安装npm install gulp-clone、npm install gulp-htmlmin和npm install gulp-uglify

三、gulpfile.js 写入如下内容:

// 获取 gulp
var gulp = require('gulp'); // 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify');
var cssUglify = require('gulp-minify-css'); // 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify({ mangle: false }))
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
}) gulp.task('auto',function(){
gulp.watch('js/*.js',['script']);
gulp.watch('css/*.css', ['css'])
}) gulp.task('css',function(){
gulp.src('css/*.css')
.pipe(cssUglify())
.pipe(gulp.dest('dist/css'))
}) gulp.task('default',['script','auto','css'])

四、创建 css 文件

在 gulpfile.js 对应目录创建 css 文件夹,并在 css/ 目录下创建 a.css 文件。

body{
font-size:12px;
background:color;
}
 

五、运行 gulp 查看效果

在命令行输入

gulp default
[17:32:04] Using gulpfile ~/Documents/mycode/gulpDemo/gulpfile.js
[17:32:04] Starting 'script'...
[17:32:04] Finished 'script' after 10 ms
[17:32:04] Starting 'auto'...
[17:32:04] Finished 'auto' after 11 ms
[17:32:04] Starting 'css'...
[17:32:04] Finished 'css' after 4.39 ms
[17:32:04] Starting 'default'...
[17:32:04] Finished 'default' after 1.41 μs

gulp 会创建 dist/css 目录,并创建 myDemo.css 文件,此文件存放压缩后的 css 代码。 

内容如下:

body{font-size:12px;background:color}

PS:左图是压缩之前的,有图是压缩之后的(min本身就是压缩的)



gulp压缩css和js的更多相关文章

  1. gulp压缩css文件跟js文件

    越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用 ...

  2. gulp压缩css

    gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安 ...

  3. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  4. 使用gulp进行css、js压缩

    var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var concatCss = require('gulp- ...

  5. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  6. Gulp压缩前端CS,JS,图片文件

    Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass.less).压缩.图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩 ...

  7. 使用 gulp 压缩 CSS

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...

  8. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  9. 【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS

    在开发中编写的js.css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担.这就得每次发版本的时候,对js.js进行压缩,然后再发布.有没有什么办法,让代码到了服务器上边,它自己进行压缩 ...

随机推荐

  1. HDU 2487 Ugly Windows(暴力)(2008 Asia Regional Beijing)

    Description Sheryl works for a software company in the country of Brada. Her job is to develop a Win ...

  2. 在用js拼接html时,给元素加不上事件的问题

    问题描述:有时,发起ajax请求成功后,需要用js去拼接一小段html字符串,然后给某些元素添加事件时,事件总是加不上. 解决办法:在success 回调函数内,给元素添加事件绑定. 代码如下: $. ...

  3. iOS- 简单说说iOS移动客户端SQLite3的基本使用

    1.为什么要使用SQLite3? •大量数据需要存储 •管理数据,存储数据   SQLite是一种关系型数据库(也是目前移动客户端的主流数据库)     2.SQLite3的几种存储类型   a.NU ...

  4. 【Quartz.net】- Cron表达式

    一.结构 corn从左到右(用空格隔开):秒 分 小时 月份中的日期 月份 星期中的日期 年份 二.各字段的含义   字段 允许值 允许的特殊字符 秒(Seconds) 0~59的整数 , - * / ...

  5. CentOS修改DNS、IP地址、网关

    一.CentOS 修改DNS 修改对应网卡的DNS的配置文件 # vi /etc/resolv.conf 修改以下内容 nameserver 8.8.8.8 #google域名服务器 nameserv ...

  6. MySQL中使用trim()删除两侧字符

    在某些情况下由于程序没处理好,导致数据表中有些字段的值会有空白字符出现,如 这样如果在严格比对name时会匹配不到.trim()函数可以解决这样的问题 作为trim()函数的子集,ltrim()函数是 ...

  7. 关于对 NUMA 理解(学习笔记,便于以后查阅)

    对NUMA的理解: NUMA是多核心CPU架构中的一种,其全称为Non-Uniform Memory Access,简单来说就是在多核心CPU中,机器的物理内存是分配给各个核的,架构简图如下所示: 每 ...

  8. MATLAB strcmp

    比较两个输入字符串是否相等 c = strcmp(str1,str2)比较字符串 str1 与 str2 ,若完全相等则返回 1 ,不相等返回 0 str1 = 'hello'; str2 = 'he ...

  9. shell脚本学习—条件测试和循环语句

    条件测试 1. 条件测试:test [ 命令test或[可以测试一个条件是否成立,如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假, 则命令的Exit Status为1(注意与 ...

  10. hdu 1281 棋盘游戏 (二分匹配)

    棋盘游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...