续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" ...
随机推荐
- Struts2的基本流程的详细介绍
Struts2基本流程 概述: Struts2框架由三部分构成:核心控制器.业务控制器和用户实现的业务逻辑组件.在这三部分中,struts2框架提供了核心控制器StrutsPrepareAndExec ...
- SQL各种连接查询详解(左连接、右连接..)
一.交叉连接(cross join) 交叉连接(cross join):有两种,显式的和隐式的,不带on子句,返回的是两表的乘积,也叫笛卡尔积. 例如:下面的语句1和语句2的结果是相同的.语句1:隐式 ...
- 字符串hash - POJ 3461 Oulipo
Oulipo Problem's Link ---------------------------------------------------------------------------- M ...
- 重构第14天 分离职责(Break Responsibilities)
理解:面向对象的五大特征: SOLID,其中S就是职责单一原则.分离职责指当一个类有许多职责时,将部分职责分离到独立的类中,这样也符合面向对象的五大特征之一的单一职责原则,同时也可以使代码的结构更加清 ...
- 自定义ConfigurationSection,创建多个嵌套的ConfigurationElementCollection节点
由于接口地址都是固定的,所以想到使用自定义节点,来将接口都配置到web.config中. 很快,v1.0版本出炉: public class RequestConfigSection : Config ...
- 极简Unity调用Android方法
简介 之前写了篇unity和Android交互的教程,由于代码里面有些公司的代码,导致很多网友看不懂,并且确实有点小复杂,这里弄一个极简的版本 步骤 废话不多说,直接来步骤吧 1.创建工程,弄大概像这 ...
- csharp: DataTable Rename ColumnName and remove Column
enum ChangeNume { /// <summary> /// 简体 /// </summary> gbk=1, /// <summary> /// 英文 ...
- sql 去重
;WITH CETAS (SELECT *, ROW_NUMBER() OVER (PARTITION BY SearchTask_PKID ORDER BY SearchTask_PKID) Row ...
- 泛函编程(22)-泛函数据类型-Monoid In Action
在上一节我们讨论了Monoid的结合性和恒等值的作用以及Monoid如何与串类元素折叠算法相匹配.不过我们只示范了一下基础类型(primitive type)Monoid实例的应用,所以上一节的讨论目 ...
- 各个平台的mysql重启命令
linux平台及windows平台mysql重启方法 Linux下重启MySQL的正确方法: 1.通过rpm包安装的MySQL service mysqld restart 2.从源码包安装的MySQ ...