使用 gulp 压缩 CSS

请务必理解如下章节后阅读此章节:

  1. 安装 Node 和 gulp
  2. 使用 gulp 压缩 JS


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

我们接着将规律转换为 gulp 代码

规律

找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下。

gulp 代码

当熟悉 使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松。

一、安装 gulp-minify-css 模块

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

在命令行输入

npm install gulp-minify-css

安装成功后你会看到如下信息:(安装时间可能会比较长)

[email protected] node_modules/gulp-minify-css
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

二、参照 使用 gulp 压缩 JS 创建 gulpfile.js 文件编写代码

在对应目录创建 gulpfile.js 文件并写入如下内容:

// 获取 gulp
var gulp = require(‘gulp‘)

// 获取 minify-css 模块(用于压缩 CSS)
var minifyCSS = require(‘gulp-minify-css‘)

// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task(‘css‘, function () {
    // 1. 找到文件
    gulp.src(‘css/*.css‘)
    // 2. 压缩文件
        .pipe(minifyCSS())
    // 3. 另存为压缩文件
        .pipe(gulp.dest(‘dist/css‘))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task(‘auto‘, function () {
    // 监听文件修改,当文件被修改则执行 css 任务
    gulp.watch(‘css/*.css‘, [‘css‘])
});

// 使用 gulp.task(‘default‘) 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task(‘default‘, [‘css‘, ‘auto‘])

你可以访问 gulp-minify-css 以查看更多用法。



三、创建 css 文件

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

/* a.css */
body a{
    color:pink;
}


四、运行 gulp 查看效果

在命令行输入 gulp +回车

你将看到命令行出现如下提示

gulp
[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/chapter3/gulpfile.js
[17:01:19] Starting ‘css‘...
[17:01:19] Finished ‘css‘ after 6.21 ms
[17:01:19] Starting ‘auto‘...
[17:01:19] Finished ‘auto‘ after 5.42 ms
[17:01:19] Starting ‘default‘...
[17:01:19] Finished ‘default‘ after 5.71 μs

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

接着阅读:使用 gulp 压缩图片

时间: 2024-11-07 16:46:27

使用 gulp 压缩 CSS的相关文章

gulp 入门---使用gulp压缩css

压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 sudo npm install gulp-minify-css 二.创建 gulpfile.js 文件编写代码 在对应目录创建 gulpfile.js 文件并

续Gulp使用入门三步压缩CSS

gulp 压缩css 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 npm install gulp-minify-css 安装成功后你会看到如下信息:(安装时间可能会比较长取决于网络) D:\wamp\www\BootsDataTable>npm install gulp-minify-cssnpm WARN deprecated [email protected]: Please use gulp-clean-c

gulp之css,js压缩合并加密替换

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然,这里还有个附加的需要就是,静态资源需要自行优化(压缩合并). 下面是我gulpfile.js的代码: var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = require('gulp-mi

gulp压缩构建代码

// 获取 gulp var gulp = require('gulp'); // 获取 uglify 模块(用于压缩 JS) var uglify = require('gulp-uglify'); // 获取 htmlminify 模块(用于压缩 html) var htmlminify = require("gulp-html-minify"); // 获取 minify-css 模块(用于压缩 CSS) var minifyCSS = require('gulp-minify-

gulp压缩顺序

1.https://github.com/nimojs/blog/issues/20 淘宝镜像 2. npm install -g gulp  安装全局gulp 3. npm install  gulp --save   安装本地 4. npm install gulp-uglify  安装js模块 5 npm install gulp-minify-css 安装压缩css模块

MVC中用 BundleCollection 压缩CSS时图片路径问题

MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用, 关于BundleCollection类的详细推荐个地址:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html 我这里只是记录下使用过程中遇到的两个小问题 1.css被压缩后,里面图片路径文件的问题 我们可以看到MVC中 BundleConfig这个类里,都是自动生成的好多需要压缩的JS和CSS bundles.A

vs合并压缩css,js插件——Bundler & Minifier

之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier 这个vs插件下载地址:点我 插件功能说明: 1.合并多个css,js,html文件为一个单独的文件 2.保存源文件自动重新组合. 3.压缩css,js,html文件 等等...(其他我没用到,

用GruntJS合并、压缩CSS资源文件

合并.压缩CSS资源文件用到了grunt-contrib-concat.grunt-css插件,自己npm就可以了,下面直接呈上package.json.Gruntfile.js代码 package.json代码如下: {  "name": "BeJS",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.

使用 gulp 压缩图片

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin