用Gulp实现CSS压缩和页面自动刷新

为什么要使用Gulp？

看了两天的Gulp，目前接触到Gulp及其一些插件的功能有：

编译LESS（或Sass）、合并与压缩CSS和JS文件、在文件修改后自动刷新页面、给文件添加版本信息等。

这些功能可以让我专注于前端开发，而不用再去管文件的编译等琐事，也不用再在修改代码后手动刷新浏览器查看效果。

这些功能几乎都依赖于Gulp的插件，当然还有更多提供其他功能的插件，大家可以去探索发现。

Gulp详细入门教程

如果不知道Gulp的基础使用方法的话，可以戳下面的链接：
Gulp详细入门教程

一个使用Gulp的小demo

这个demo使用Gulp实现文件修改后的自动刷新浏览器页面、编译LESS以及合并压缩CSS文件。

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'),
    less = require('gulp-less'),            
    browserSync = require('browser-sync'),  // 保存自动刷新

    cssnano = require('gulp-cssnano'),      // CSS 压缩
    rename = require('gulp-rename'),        // 重命名，其实在这个demo里没有用到
    concat = require('gulp-concat'),        // 合并文件

    //当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber
    notify = require('gulp-notify'),        // 相当于 console.log()
    plumber = require('gulp-plumber');
 
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/*.less')                                                         //该任务针对的文件
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))   //错误处理
        .pipe(less())                                                                   //编译less
        .pipe(gulp.dest('src/css'))                                                     //将会在src/css下生成CSS文件
        .pipe(concat('index.min.css'))                                                  //合并CSS文件为index.min.css
        .pipe(cssnano())                                                                //压缩
        .pipe(gulp.dest('dist'));                                                       //输出压缩后的文件
});

gulp.task('testWatch', function () {
    browserSync.init({
        server: {
            baseDir: 'dist'                 // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器
        }
    });

    gulp.watch('src/less/*.less', ['testLess']);
    gulp.watch(['dist/*']).on('change', browserSync.reload);
});

//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

解释一下代码

首先需要在命令行中执行Gulp任务：

gulp testWatch

在名为testWatch的task中，browserSync.init()启动了服务器并打开浏览器、打开了dist文件夹下的index.html页面。

其下的两个gulp.watch()方法分别监视了less文件的修改与dist文件夹下文件的修改，当less文件修改时，调用名为testLess的task，完成less文件的编译并合并压缩CSS文件；此时dist下的CSS文件被修改了，会调用browserSync.reload方法刷新页面。

下附项目目录结构：

项目目录结构

最后

这个demo中用到的插件有：

• browser-sync
• gulp-concat
• gulp-cssnano
• gulp-less
• gulp-notify
• gulp-plumber
• gulp-rename

在代码的注释里面说明了它们的用途，在使用之前我们需要使用以下指令安装插件并添加到package.json文件的开发依赖中。

npm install <插件名> --save-dev

也许你不需要编译LESS的功能，也许你还需要更多其他Gulp的功能，这些通过灵活使用Gulp的插件都能够实现。

最后推荐两个我认为对学习Gulp入门有用的链接：

想了解更多关于Gulp基础API的知识，可以看gulp API 文档

再推荐一位大佬的文章，可以学到更多关于Gulp的用法：
Gulp 自动化你的前端