Gulp API之怎样压缩CSS
先做一个简单的科普
gulp.src() 是用来定位执行路径的,参数通常是一个path
gulp.dest() 是用来定位输出路径的,执行的结果都会保存在这个路径下面,可以到路径下面查看结果
gulp.pipe() 将需要处理的内容导向一个插件
gulp.watch(glob, fn) 当glob内容发生改变时,执行fn
gulp.task() 定义一个gulp任务
var gulp = require('gulp'); gulp.task('task1', function () {
console.log('task1 done');
}); gulp.task('task2', function () {
console.log('task2 done!');
}); gulp.task('task3', function () {
console.log('task3 done');
}); gulp.task('end', ['task1', 'task3', 'task2'], function () {
console.log('end done');
});
在我电脑上的执行结果是这样的
gulp.run(tasks...) 尽可能多的并行运行多个task
使用run()后,上述代码可修改为
var gulp = require('gulp'); gulp.task('task1', function () {
console.log('task1 done');
}); gulp.task('task2', function () {
console.log('task2 done!');
}); gulp.task('task3', function () {
console.log('task3 done');
}); gulp.task('end', function () {
gulp.run('task1','task3','task2');
});
输出的结果为
结果没什么不正常,注意到一段话,说run()这个方法已经不被提倡了,建议使用watch()来代替,然而我还并不知道watch到底能做些什么,以后再说。
好,现在科普完毕,我们开始压缩css。
首先我们找到我们存放css的路径,注意,我们的所有路径都是相对于gulpfile.js这个文件来说的,也就是根目录,我的css文件是放在./css下的
然后我们要想好我们结果输出的路径,我就放在根目录下面的min文件夹好了,
想好这些以后我们就可以开始写代码了
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var del = require('del'); gulp.task('default', function() {
//default task code
}); gulp.task('minify-css', function(){
return gulp.src('./css/*.css')
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./min'))
.pipe(notify({message: 'minify-css task complete'}));
});
我不知道我会用到哪些插件,为了防止报错,我就全引用进来了,我们只需要关注minify-css这个task的代码段,而这个时候我已经不需要解释你就可以看懂了。
执行结果如下
而在我们的输出路径下也能看到我们的压缩文件
这样,我们不仅学会了如何压缩文件,也熟悉了gulp的API。
Gulp API之怎样压缩CSS的更多相关文章
- gulp构建前端,压缩css,js文件,实现浏览器自动刷新
一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...
- gulp压缩css文件跟js文件
越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用 ...
- 续Gulp使用入门三步压缩CSS
gulp 压缩css 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 npm install gulp-minify-cs ...
- gulp 之一 安装及简单CSS,JS文件合并压缩
最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...
- gulp压缩css和js
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...
- 使用 gulp 压缩 CSS
请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...
- gulp压缩css
gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安 ...
- gulp api
gulp api 简介 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成 gulp是基于Nod ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
随机推荐
- ztree 使用心得
最近项目需要用ztree ,初步研究感觉这个插件写的实在是太好了.现总结遇到的问题 封装一颗树 /** * 按类型分组树 * Id 按类型分组ID * treeId 树ID * treeDivId d ...
- 网页访问过程(基于CDN)
1. 全局负载均衡(基于DNS) 如果有多台 WEB 服务器同时为一个域名提供服务时,即一条 URL 对应多个 IP 地址,那么该 URL 的权威域名服务器可能会根据该 URL 解析出多个 IP 地址 ...
- WPF string,color,brush之间的转换
String转换成Color string-"ffffff" Color color = (Color)ColorConverter.ConvertFromString(strin ...
- 实测 | 转型微服务,这4大工具谁是API网关性能最优?
转自:http://www.servicemesh.cn/?/article/45 作者:Turgay Çelik 翻译:钟毅(Drew Zhong) 原文:Comparing API Gateway ...
- 微服务架构之思维三部曲:What、Why、How
本文转自:http://www.servicemesh.cn/?/article/49 What:什么是微服务? 某百科对微服务架构的定义和阐述:微服务可以在“自己的程序”中运行,并通过“轻量级设备与 ...
- 查看ROS最大并发连接数量
命令行下输入以下 ip firewall connection tracking print interval 1 max-entries这个就是最大的并发连接数量 退出按Q
- Word中怎样删除分节符而不影响前节页面设置
在Word中,通过常规方法删除一个不需要的分节符时,会默认将分节符后面的页面设置带入前一节.比如,第一节是纵向排版,第二节是横向排版,当删除第二节的全部内容,包括二者之间的分节符之后,就会使得第一节的 ...
- java.lang.NoSuchMethodError: org.hibernate.integrator.internal.IntegratorServiceImpl.<init>(Ljava/util/LinkedHashSet;Lorg/hibernate/boot/registry/classloading/spi/ClassLoaderService;)
需要:4.3及以上的版本才能用StandardServiceRegistryBuilder() hibernate-core-4.3.11.Final.jar version:4.3 ServiceR ...
- Mysql 数据锁与事务
一.锁 常用命令 查看表的存储引擎:mysql> show create table myLock; 修改当前表的存储引擎:mysql> alter table myLock engine ...
- mock测试SpringMVC controller报错
使用mock测试Controller时报错如下 java.lang.NoClassDefFoundError: javax/servlet/SessionCookieConfig at org.spr ...