嘴对嘴教你使用Gulp-白红宇

什么是Gulp?

Gulp 是一个前端自动化工具，开发者可以使用它来处理常见任务：

搭建web服务器

文件保存时自动重载浏览器

使用预处理器如Sass、LESS

优化资源，比如压缩CSS、JavaScript、压缩图片

安装Gulp

安装Gulp之前你需要先安装

安装 gulp：

$ npm install gulp -g  // 全局安装gulp$ npm install gulp --save-dev   // 作为项目的开发依赖（devDependencies）安装复制代码

创建Gulp项目

首先，在新建项目文件夹目录下执行 npm init 命令：


    $ npm init 复制代码

补充项目相关信息后，进行局部安装Gulp


    
    $ npm install gulp --save-dev复制代码

在package.json自动生成如下的Json内容：

{  "name": "gulpdemo",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "jw",  "license": "ISC",  "devDependencies": {    "gulp": "^3.9.1",  }}复制代码

Gulp开发构建

创建通用的webapp目录结构,并明确下项目的目录结构。（此例目录结构作为学习示范，非固定）

|-app/              
        |-css/                  |-js/    |-scss/    |-images/    |-fonts/    |-index.html|-dist/             
    |-gulpfile.js       
    |-node_modules/       |-package.json      复制代码

在项目的gulpfile.js文件中：

var gulp = require('gulp');复制代码

这行命令告知Node去node_modules中查找gulp包，先局部查找，否则在全局环境中查找，并赋值使用gulp变量

牛刀小试：

gulp.task('hello', function() {  console.log('Hello World!');});复制代码

命令行中执行：$ gulp hello，将会输出Hello World.

使用sass预处理插件

安装

$ npm install gulp-sass --save-dev复制代码

引入插件

var gulp = require('gulp');var sass = require('gulp-sass');复制代码

使用

// 将对styles.scss进行预处理后生成styles.cssgulp.task('sass', function(){    return gulp.src('app/scss/**/*.scss') //来源      .pipe(sass())   //执行sass()      .pipe(gulp.dest('app/css')) //生成});复制代码

补充：【常用的4种匹配模式】 *.scss ： * 号匹配当前目录任意文件，所以这里 *.scss 匹配当前目录下所有scss文件 **/*.scss ：匹配当前目录及其子目录下的所有scss文件。 !not-me.scss ：！号移除匹配的文件，这里将移除not-me.scss *.+(scss|sass) ：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

使用Browser Sync插件自动刷新

安装


    $ npm install browser-sync --save-dev复制代码

引入

var browserSync = require('browser-sync');复制代码

使用

gulp.task('browserSync', function() {   browserSync({     server: {       baseDir: 'app'  //需要告知它，根目录在哪里     },   })})复制代码

使用watch监听方法

Gulp提供watch方法给我们，语法如下：

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);复制代码

上例中的sass就可以改造成这样：

gulp.watch('app/scss/**/*.scss', ['sass']);复制代码

通常我们监听的还不只是一个文件，把它变成一个任务：

gulp.task('watch', function(){    gulp.watch('app/scss/**/*.scss', ['sass']);    // Other watchers})复制代码

执行gulp watch命令监听，每次修改文件，Gulp都将自动为我们执行任务。 4. 综合使用

我们稍微修改一下之前的sass设置，让每次css文件更改都刷新一下浏览器：

gulp.task('sass', function() {  return gulp.src('app/scss/**/*.scss')     .pipe(sass())    .pipe(gulp.dest('app/css'))    .pipe(browserSync.reload({      stream: true  //每次修改会自动刷新浏览器    }))});复制代码

使用修改监听。

gulp.task('watch', function (){  gulp.watch('app/scss/**/*.scss', ['sass']);  // 当HTML或JS文件改变时，也重新加载浏览器  gulp.watch('app/*.html', browserSync.reload);  gulp.watch('app/js/**/*.js', browserSync.reload);})复制代码

到目前为止，我们做了下面三件事：

可运转的web开发服务

使用Sass预处理器

自动刷新浏览器

Gulp打包优化构建


    gulp.task('fonts', function() {  return gulp.src('app/fonts/**/*')    .pipe(gulp.dest('dist/fonts'))})复制代码

多文件拼接成单一文件并压缩

安装

npm install gulp-useref --save-dev //文件拼接插件npm install gulp-uglify --save-dev //js压缩插件npm install gulp-minify-css --save-dev //css压缩插件npm install gulp-if --save-dev //区分处理插件复制代码

引用

var useref = require('gulp-useref')var uglify = require('gulp-uglify')var minifyCSS = require('gulp-minify-css')var gulpIf = require('gulp-if')复制代码

使用

--index.html--
    
    
    
    
    
    复制代码

--gulpfile.js--gulp.task('useref', function(){    return gulp.src('app/*.html')    .pipe(useref())    .pipe(gulpIf('*.css', minifyCSS()))    .pipe(gulpIf('*.js', uglify()))    .pipe(gulp.dest('dist'))  });复制代码

图片优化（gulp-imagemin）

安装

$ npm install gulp-imagemin --save-dev$ npm install gulp-cache --save-dev  //减少重复压缩复制代码

引入

var imagemin = require('gulp-imagemin')var cache = require('gulp-cache')复制代码

使用

gulp.task('images', function(){  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')  // Caching images that ran through imagemin  .pipe(cache(imagemin({      interlaced: true    })))  .pipe(gulp.dest('dist/images'))});复制代码

清理生成文件（del）

由于我们是自动生成文件，我们不想旧文件掺杂进来

安装

$ npm install del --save-dev复制代码

引入

var del = require('del')复制代码

使用

//情景1：全部清除gulp.task('clean', function() {  del('dist');});//情景2：不清除图片文件gulp.task('clean:dist', function(callback){  del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)});复制代码

Gulp组合

gulp.task('build', [`clean:dist`, `sass`, `useref`, `images`, `fonts`], function (){  console.log('Building files');})复制代码

但是这样Gulp会同时触发 [] 里的事件。我们要让clean在其他任务之前完成，所以引入 RunSequence插件

$ npm install run-sequence --save-dev  //安装var runSequence = require('run-sequence') //引入复制代码

改造后开发和打包自动化构建：

// 构建打包gulp.task('build', function (callback) {  runSequence('clean:dist',    ['sass', 'useref', 'images', 'fonts'],    callback  )})复制代码

// 开发过程gulp.task('default', function (callback) {  runSequence(['sass','browserSync', 'watch'],    callback  )})复制代码