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;
