利用gulp实现热更新、编译sass文件、压缩、合并、兼容各浏览

 在做移动开发时，我们常常将多个css文件进行压缩合并处理，来减少http请求，来加快网页的渲染速度、提高用户的体验度。今天我将这些知识点整理了一番，利用gulp实现热更新、编译sass文件、压缩、合并、兼容各浏览器的css文件。

一、前期准备工作：

1.全局安装gulp环境

安装命令：cnpm i gulp -g

2.并在项目目录中安装gulp依赖

安装命令：cnpm i gulp -D

3.为项目配置package.json文件（这一步也可以放在第一步执行）

执行命令：cnpm init

二、在工程目录中创建gulpfile.js文件（注意：不要自己随意起这个文件名，否则在编译时会无响应，亲身体验），以下代码全部写在该文件下

三、用gulp安装所需要的模块，安装完成后在gulpfile.js文件中引入模块：

1.gulp模块

const gulp = require('gulp');

2.热更新模块，每次编辑完保存时，自动更新网页信息

const webserver = require('gulp-webserver');

3.sass编译模块，将sass文件（.scss和.sass后缀）编译成css文件

const sass = require('gulp-sass');

4.合并模块、可以将多个css文件合并成一个文件

const concat = require('gulp-concat');

5.css兼容模块，做各浏览器的兼容

const auto = require('gulp-autoprefixer');

四、建立任务

1.创建热更新服务，注意directoryListing的值，当设置为true时，在浏览器输入http://localhost:9000/时现实的时文档目录；设置为false时，显示的是工程文档目录中index.html的内容，即网站首页

gulp.task('server',function(){

         gulp.src('./')

                .pipe(webserver({

                         host:'localhost',

                         port:'9000',

                         livereload:true,

                        directoryListing:false

         }))

})

2.创建sass编译任务，并在任务中进行文件的压缩、合并、处理兼容

gulp.task('sass',function(){

         //找到文件夹中所有的scss文件

          gulp.src('./src/sass/**/*.scss')

                  //编译scss文件为css文件

                 .pipe(sass({outputStyle:'compressed'}).on('error',sass.logError))

                  //将上面编译后的多个css文件合并成index.css 

                 .pipe(concat('index.css'))

                 .pipe(auto({//处理兼容

                         browsers:['last 2 version'],

                         cascade:false

                  }))

                 //将处理完的css文件保存到项目的目录中

                 .pipe(gulp.dest('./build/css'))

})

五、监听sass任务

gulp.task('watch:sass',function(){

        gulp.watch('./src/sass/**/*.scss',['sass'])

})

六、默认任务,先编译然后监听最后更新，注意任务顺序

gulp.task('default',['sass','watch:sass','server'])

七、结束，完成以上六步，在终端进入工程目录

执行：gulp

在工程目录中查看各文件的变动、然后再浏览器中输入：http://localhost:9000查看一下你的成果吧（注意：要在编译的状态下查看）