gulp学习笔记2
gulp系列学习笔记:
1、 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度。
目标:找到 css/
目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/
目录下。
在压缩之前,需要安装新的模块,输入以下命令行:
npm install gulp-minify-css
在对应目录创建 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 css
gulp 会创建 dist/css
目录,并创建 对应的.css
文件,此文件存放压缩后的 css 代码。
2、压缩图片
压缩 图片文件可降低文件大小,提高图片加载速度。
目标:找到 images/
目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/
目录下。
在压缩之前,需要安装新的模块,输入以下命令行:
npm install gulp-imagemin
在对应目录创建 gulpfile.js
文件并写入如下内容:
// 获取 gulp
var gulp = require('gulp'); // 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin') // 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
// 1. 找到图片
gulp.src('images/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
});
你可以访问 gulp-imagemin 以查看更多用法。
此时在命令行输入:
gulp images
在 gulpfile.js
对应目录创建 images
文件夹,并在 images/
目录下存放图片。
3、编译 LESS
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护。
在编译之前,需要安装新的模块,输入以下命令行:
npm install gulp-less
在对应目录创建 gulpfile.js
文件并写入如下内容:
// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-less 模块
var less = require('gulp-less') // 编译less
// 在命令行输入 gulp less 启动此任务
gulp.task('less', function () {
// 1. 找到 less 文件
gulp.src('less/**.less')
// 2. 编译为css
.pipe(less())
// 3. 另存文件
.pipe(gulp.dest('dist/css'))
});
你可以访问 gulp-less 以查看更多用法。
此时在命令行输入:
gulp less
在 gulpfile.js
对应目录创建 dist/css
文件夹,并在 dist/css
目录下存放图片。
文章参考了以下资料:
1、gulp详细入门教程: http://www.ydcss.com/archives/18;
2、gulp API 文档: http://www.gulpjs.com.cn/docs/api/;
3、gulp 入门指南: https://github.com/huanshen/gulp-book;
3\
gulp学习笔记2的更多相关文章
- gulp学习笔记4
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...
- gulp学习笔记1
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- gulp 学习笔记
以这次学习gulp为契机来同时了解和学习node相关的知识和概念,比如 npm,package.json等,为以后学习node打好基础. 目录 npm 查看模块 安装模块 ...
- gulp学习笔记——最好的学习文档是官网
官网:http://www.gulpjs.com.cn/docs/api/ 当然还有一个博客写的也很好,当我看不下去官网的时候,这个帮助了我很多,明了易懂:http://www.ydcss.com/a ...
- gulp学习笔记
第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...
- gulp 学习笔记 (初识)
根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...
- gulp学习笔记2-安装
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.去nodejs官网安装nodejs 2. ...
随机推荐
- ASP.NET ZERO 学习 事件总线
用于注册和触发客户端的全局事件. 介绍 Pub/sub事件模型广泛用于客户端,ABP包含了一个简单的全局事件总线来 注册并 触发事件. 注册事件 可以使用abp.event.on来注册一个全局事件.一 ...
- Activity生命周期(一) 暨 帮助文档的使用
--------siwuxie95 首先创建一个ActivityLifeCircle 选择API:21 Android 5.0 (截止目前:2016/12/21,承上启下,兼容更好) 选择空活动 ...
- swift 定制自己的Button样式
swift的UIButton类中有些公开方法可以重写,所以,如果想写出自己的UIButton,只要继承UIButton类,并重写相应的方法即可. 系统的UIButton可以添加图片,也可以添加标题,但 ...
- Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案
我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图片错位.重复.闪烁等问题,其实这些问题总结起来就是一个问题,我们需要对这些问题进行ListView的优化. 比如L ...
- Spark Streaming
Spark Streaming Spark Streaming 是Spark为了用户实现流式计算的模型. 数据源包括Kafka,Flume,HDFS等. DStream 离散化流(discretize ...
- 链接,光标,DHTML,缩放
18.1css中链接的使用超链接伪类属性:a:link 表示该链接文字尚未被点选a:visited 表示该链接文字已被点选过a:active 表示该链接文字正被点选,但未被放开a:hover 表示当鼠 ...
- JS的循环、复杂运算符
一.循环语句 特点:可以重复完成同样的事情 1.while(条件语句/boolean){ 重复执行的代码块 } while的两种写法 var a= prompt("请输入第 ...
- python 字符串函数
split函数:将字符串分割成序列 str.split("分隔符") 一般可以这样用 list = [n for n in str.split],这样可以得到一个新的序列 str ...
- WebService 调用
一.WebService调用 1.webservice支持四种调用方式:SOAP 1.1,SOAP 1.2,GET,POST. 2.如果要webservice支持GET,POST调 ...
- P1147连续自然数和
洛谷1147 连续自然数和 题目描述 对一个给定的自然数M,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为M. 例子:1998+1999+2000+2001+2002 = 10000,所 ...