gulp学习笔记2

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