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 ...
随机推荐
- web国际化,在不同的浏览环境,显示不同的语言
所谓国际化就是支持多种语言,web应用在不同的浏览环境中可以显示出不同的语言.假设我们正在开发一个支持多国语言的Web应用程序,要求系统能够根据客户端的系统的语言类型返回对应的界面:英文的操作系统返回 ...
- SCRUM:周日周一任务实现情况
1.设计.制作欢迎界面 2.对杰龙注册界面进行重设计和规范strings → → →
- TCP/IP协议三次握手和四次挥手大白话解说
前言 昨天晚上被一位师傅问到了TCP/IP的工作机制,心里很清楚三次握手,然而对于四次挥手却忘了,这是大学习里学过的,奋而翻阅书籍和网络对之前所学的做一个温顾,算是夯实自我吧. TCP(Transmi ...
- JS选取DOM元素的方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...
- C++模式学习------工厂模式
工厂模式属于创建型模式,大致可以分为简单工厂模式.抽象工厂模式. 简单工厂模式,它的主要特点是需要在工厂类中做判断,从而创造相应的产品. enum PTYPE { ProdA = , ProdB = ...
- C++解析命令行参数(仿C语言args)
说好不造轮子的,就管不住这手 #include <cstdio> #include <string> #include <vector> bool ParseCha ...
- Spring(2):Spring Ioc
1.下载spring-framework-3.2.0 完整包下载路径: https://repo.spring.io/webapp/#/artifacts/browse/tree/Properties ...
- TreeMap源码剖析
原文 http://blog.csdn.net/chdjj/article/details/38782221 主题 源码分析红黑树 注:以下源码基于jdk1.7.0_11 之前介绍了一系列Map集合 ...
- 我的shell脚本
问题:在ip.lt文件中有600个IP,有3个文档模版,三个文档的名称结构都是“ip+一系列字符串”,要求:1.将600个IP分成3分,以三个模版为基础创建600个文档,名字结构与模版相同:2修改60 ...
- UOJ #126 【NOI2013】 快餐店
题目链接:快餐店 震惊!某ZZ选手此题调了一天竟是因为……>>点击查看 一般碰到这种基环树的题都要先想想树上怎么做.这道题如果是在树上的话……好像求一遍直径就做完了?答案就是直径长度的一半 ...