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. ...
随机推荐
- EditText的一些属性及用法
EditText的一些属性及用法设置当EditText获得焦点时把文本框的内容全选中android:selectAllOnFocus="true"设置某个EditText默认获得焦 ...
- 三级设置页面管理测试demo
#include "PhoneBookWindow.h"#include "xWindow/xWindow.h"#include "hardwareD ...
- JS中delete删除对象属性
1.删除对象属性 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm ...
- 简单介绍智能DNS解析+双线路接入
导读:在讨论这个问题,其中群友老孤同志也提供了不少非常有参考价值的资料,所以我们再把这些资料再整理一次,从比较底层的技术原理上重新进行一次分析. 我们知道,因为南电信北网通现象的存在,我们的服务器 ...
- python 生产者消费者模型
import time def consumer(name): print("%s开始吃包子了"%name) while True: ret = yield time.sleep( ...
- 重载new和delete
当我们创建一个new表达式时,会发生两件事.首先使用operator new()分配内存,然后调用构造函数.在delete表达式里,调用了析构函数,然后使用operator delete()释放内存. ...
- StringGrid 实例3: 本例功能: 1、修改 TStringGrid的默认宽与高; 2、添加行; 3、确认当前单元并赋值.
实例3: 本例功能: 1.修改 TStringGrid的默认宽与高; 2.添加行; 3.确认当前单元并赋值. 实例图形:
- 在Openfire中使用自己的数据表之修改配置文件
目前我使用的Openfire版本是3.10.3,以下使用说明也是在这个版本上做的修改. Openfire提供了两种方式使用用户数据表.一种是安装完成之后默认实现的org.jivesoftware.op ...
- 天气预报数据API
http://www.weather.com.cn/data/cityinfo/101010100.html//过期: http://api.36wu.com/Weather/GetMoreWeath ...
- rename() 是原子的么
对一个文件做修改, 通常认为 直接 open-seek-write-write-close 不是原子的. 1. write 本身 不一定是原子的: https://blogs.msdn.microso ...