先做一个简单的科普

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的更多相关文章

  1. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  2. gulp压缩css文件跟js文件

    越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用 ...

  3. 续Gulp使用入门三步压缩CSS

    gulp 压缩css 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 npm install gulp-minify-cs ...

  4. gulp 之一 安装及简单CSS,JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

  5. gulp压缩css和js

    压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...

  6. 使用 gulp 压缩 CSS

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...

  7. gulp压缩css

    gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安 ...

  8. gulp api

    gulp api 简介 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成 gulp是基于Nod ...

  9. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

随机推荐

  1. web国际化,在不同的浏览环境,显示不同的语言

    所谓国际化就是支持多种语言,web应用在不同的浏览环境中可以显示出不同的语言.假设我们正在开发一个支持多国语言的Web应用程序,要求系统能够根据客户端的系统的语言类型返回对应的界面:英文的操作系统返回 ...

  2. SCRUM:周日周一任务实现情况

    1.设计.制作欢迎界面 2.对杰龙注册界面进行重设计和规范strings     →         →         →    

  3. TCP/IP协议三次握手和四次挥手大白话解说

    前言 昨天晚上被一位师傅问到了TCP/IP的工作机制,心里很清楚三次握手,然而对于四次挥手却忘了,这是大学习里学过的,奋而翻阅书籍和网络对之前所学的做一个温顾,算是夯实自我吧. TCP(Transmi ...

  4. JS选取DOM元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...

  5. C++模式学习------工厂模式

    工厂模式属于创建型模式,大致可以分为简单工厂模式.抽象工厂模式. 简单工厂模式,它的主要特点是需要在工厂类中做判断,从而创造相应的产品. enum PTYPE { ProdA = , ProdB = ...

  6. C++解析命令行参数(仿C语言args)

    说好不造轮子的,就管不住这手 #include <cstdio> #include <string> #include <vector> bool ParseCha ...

  7. Spring(2):Spring Ioc

    1.下载spring-framework-3.2.0 完整包下载路径: https://repo.spring.io/webapp/#/artifacts/browse/tree/Properties ...

  8. TreeMap源码剖析

    原文  http://blog.csdn.net/chdjj/article/details/38782221 主题 源码分析红黑树 注:以下源码基于jdk1.7.0_11 之前介绍了一系列Map集合 ...

  9. 我的shell脚本

    问题:在ip.lt文件中有600个IP,有3个文档模版,三个文档的名称结构都是“ip+一系列字符串”,要求:1.将600个IP分成3分,以三个模版为基础创建600个文档,名字结构与模版相同:2修改60 ...

  10. UOJ #126 【NOI2013】 快餐店

    题目链接:快餐店 震惊!某ZZ选手此题调了一天竟是因为……>>点击查看 一般碰到这种基环树的题都要先想想树上怎么做.这道题如果是在树上的话……好像求一遍直径就做完了?答案就是直径长度的一半 ...