gulp系列学习笔记:

1、gulp学习笔记1

2、gulp学习笔记2

3、gulp学习笔记3

4、gulp学习笔记4

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

  1. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  2. gulp学习笔记1

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...

  3. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  4. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  5. gulp 学习笔记

    以这次学习gulp为契机来同时了解和学习node相关的知识和概念,比如 npm,package.json等,为以后学习node打好基础. 目录   npm     查看模块     安装模块      ...

  6. gulp学习笔记——最好的学习文档是官网

    官网:http://www.gulpjs.com.cn/docs/api/ 当然还有一个博客写的也很好,当我看不下去官网的时候,这个帮助了我很多,明了易懂:http://www.ydcss.com/a ...

  7. gulp学习笔记

    第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...

  8. gulp 学习笔记 (初识)

    根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...

  9. gulp学习笔记2-安装

    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.去nodejs官网安装nodejs 2. ...

随机推荐

  1. ASP.NET ZERO 学习 事件总线

    用于注册和触发客户端的全局事件. 介绍 Pub/sub事件模型广泛用于客户端,ABP包含了一个简单的全局事件总线来 注册并 触发事件. 注册事件 可以使用abp.event.on来注册一个全局事件.一 ...

  2. Activity生命周期(一) 暨 帮助文档的使用

    --------siwuxie95 首先创建一个ActivityLifeCircle 选择API:21   Android 5.0  (截止目前:2016/12/21,承上启下,兼容更好) 选择空活动 ...

  3. swift 定制自己的Button样式

    swift的UIButton类中有些公开方法可以重写,所以,如果想写出自己的UIButton,只要继承UIButton类,并重写相应的方法即可. 系统的UIButton可以添加图片,也可以添加标题,但 ...

  4. Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案

    我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图片错位.重复.闪烁等问题,其实这些问题总结起来就是一个问题,我们需要对这些问题进行ListView的优化. 比如L ...

  5. Spark Streaming

    Spark Streaming Spark Streaming 是Spark为了用户实现流式计算的模型. 数据源包括Kafka,Flume,HDFS等. DStream 离散化流(discretize ...

  6. 链接,光标,DHTML,缩放

    18.1css中链接的使用超链接伪类属性:a:link 表示该链接文字尚未被点选a:visited 表示该链接文字已被点选过a:active 表示该链接文字正被点选,但未被放开a:hover 表示当鼠 ...

  7. JS的循环、复杂运算符

    一.循环语句 特点:可以重复完成同样的事情 1.while(条件语句/boolean){  重复执行的代码块 } while的两种写法         var a= prompt("请输入第 ...

  8. python 字符串函数

    split函数:将字符串分割成序列 str.split("分隔符") 一般可以这样用 list = [n  for n in str.split],这样可以得到一个新的序列 str ...

  9. WebService 调用

    一.WebService调用 1.webservice支持四种调用方式:SOAP 1.1,SOAP 1.2,GET,POST.           2.如果要webservice支持GET,POST调 ...

  10. P1147连续自然数和

    洛谷1147 连续自然数和 题目描述 对一个给定的自然数M,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为M. 例子:1998+1999+2000+2001+2002 = 10000,所 ...