续Gulp使用入门三步压缩CSS
gulp 压缩css
一、安装 gulp-minify-css 模块
提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作。
在命令行输入
npm install gulp-minify-css
安装成功后你会看到如下信息:(安装时间可能会比较长取决于网络)
D:\wamp\www\BootsDataTable>npm install gulp-minify-css
npm WARN deprecated gulp-minify-css@1.2.4: Please use gulp-clean-css
test@1.0.0 D:\wamp\www\BootsDataTable
`-- gulp-minify-css@1.2.4
+-- clean-css@3.4.19
| +-- commander@2.8.1
| | `-- graceful-readlink@1.0.1
| `-- source-map@0.4.4
| `-- amdefine@1.0.0
+-- object-assign@4.1.0
`-- vinyl-bufferstream@1.0.1
`-- bufferstreams@1.0.1
`-- readable-stream@1.1.14
`-- isarray@0.0.1
二、参照 使用 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'])
三、创建 css 文件
在 gulpfile.js 对应目录创建 css 文件夹,并在 css/ 目录下创建 a.css 文件。
/* a.css */
body a{
color:pink;
}
四、运行 gulp 查看效果
在命令行输入 gulp +回车
gulp
[10:48:27] Using gulpfile D:\wamp\www\BootsDataTable\gulpfile.js
[10:48:27] Starting 'css'...
[10:48:27] Finished 'css' after 3.83 ms
[10:48:27] Starting 'auto'...
[10:48:27] Finished 'auto' after 19 ms
[10:48:27] Starting 'default'...
[10:48:27] Finished 'default' after 11 μs
gulp 会创建 dist/css 目录,并创建 a.css 文件,此文件存放压缩后的 css 代码。 dist/css/a.css
续Gulp使用入门三步压缩CSS的更多相关文章
- 续Gulp使用入门三步压缩图片
gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
- 续Gulp使用入门-综合运用>使用Gulp构建一个项目
这是我的文件目录结构图 下面是我gulpfile.js的配置 'use strict' var gulp=require('gulp'); var gutil=require('gulp-util' ...
- MongoDB入门三步曲2--基本操作(续)--聚合、索引、游标及mapReduce
mongodb 基本操作(续)--聚合.索引.游标及mapReduce 目录 聚合操作 MapReduce 游标 索引 聚合操作 像大多关系数据库一样,Mongodb也提供了聚合操作,这里仅列取常见到 ...
- 续Gulp使用入门编译Sass
使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...
- MongoDB入门三步曲1--安装、基本操作
mongodb 基本操作 目录 mongodb安装 mongod启动 mongo shell启动 mongod 停止 mongodb基本操作:CRUD 数据插入 数据查询 数据更新 数据删除 集合删除 ...
- MongoDB入门三步曲3--部署技术:主备、副本集和数据分片
mongodb部署--主备.副本及数据分片 主备复制 副本集 数据分片 主备复制 主备复制是最基本的一种多点部署方案,在读写分离.热备份.数据恢复等方面具有重要作用. 在真实的生产环境,主备库肯定需要 ...
- Gulp使用入门操作十一步压缩JS
前提需要安装nodejs 一. 全局安装Gulp npm install -g gulp 二.新建一个 gulpfile.js 文件 chapter2└── gulpfile.js 三.在 gulpf ...
- gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)
gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...
随机推荐
- sprint2 项目部署+展示
项目展示网址: http://160q49b998.51mypc.cn/ (注:所有用户密码都为123456,校内断网时访问不了)
- SQL Server 多条记录的某个字段拼接
USE [FM_Dev] GO /****** 对象: UserDefinedFunction [dbo].[GetClassNameByStudentCode] 脚本日期: 05/23/2014 1 ...
- 如何手动让HttpRequestBase.IsAuthenticated 和 HttpContext.User.Identity.IsAuthenticated 为true.
今天为了重写权限验证这块需要重写AuthorizeAttribute 这个属性,看了官方文档:HttpContextBase.User.Identity.IsAuthenticated 这个必须是tr ...
- js 自带的 filter()方法
1. 方法概述 它用于把Array的某些元素过滤掉,然后返回剩下的元素组成的数组. 2. 例子 2.1 尝试用filter()筛选出素数: 'use strict'; function get_pri ...
- 【JVM】2、关于jdk7的MethodHandle类
关于MethodHandle类,这个类是在jdk1.7之后加入的,这个类的作用类似函数指针的意思 这个类中有一个方法 这里我的jdk有一个问题,就是我在进行MethodHandle操作的时候,我们会发 ...
- ajax提交复杂对象数据
public class RouteItemManageReq { private List<WorkNodeReq> targetNodes; private RouteItemReq ...
- [转载]拜占庭问题深入讨论 from http://bitkan.com/news/topic/14011
拜占庭将军问题深入探讨 了解过比特币和区块链的人,多少都听说过拜占庭将军问题,或听说过比特币(或区块链)的一个重要成就正是解决了拜占庭将军问题.但真正明白这个问题的人并不多,甚至知道这个问题实质的人都 ...
- R语言归一化处理
归一化化就是要把你需要处理的数据经过处理后(通过某种算法)限制在你需要的一定范围内.首先归一化是为了后面数据处理的方便,其次是保正程序运行时收敛加快. R语言中的归一化函数:scale 数据归一化包括 ...
- dubbo序列化的一点注意
最近工作中遇见了一个小问题,在此记录一下,大致是这样的,有一父类,有一个属性traceId,主要是记录日志号,这样可以把所有日志串起来,利于排查问题,所有的pojo对象继承于此,但是其中一同事在子类p ...
- express新旧语法对比
备个份, 原文: http://stackoverflow.com/questions/25550819/error-most-middleware-like-bodyparser-is-no-lon ...