自动化构建工具Gulp

Gulp

1.Gulp介绍

中文主页

gulp是与grunt功能类似的前端项目构建工具，也是基于Nodejs的自动任务运行器

能自动化地完成JavaScript、coffee、sass、less、html、image、css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务

gulp更高效（异步多任务），更易于使用，插件高质量

目录结构

---

2.开始使用

• 安装gulp

  //全局安装gulp
  npm install gulp -g
  //局部安装gulp
  npm install gulp --save-dev

• 引入gulp模块（在gulpfile.js中）

var gulp = require('gulp');

// 注册任务
gulp.task('任务名', function () {
  // 配置任务的操作
})

// 注册默认任务
gulp.task('default',['任务'])  //异步执行

• 使用gulp插件

//gulp相关插件
gulp-concat  //合并文件（js/css）

gulp-uglify  //压缩js文件

gulp-rename  //文件重命名

gulp-less   //编译less

gulp-clean-css  //压缩css

gulp-livereload  //实时自动编译刷新

//重要API
gulp.src(filePath/pathArr):
 //指向指定路径的所有文件，返回文件流对象
 //用于读取文件
gulp.dest(dirPath/pathArr)
 //指向指定的所有文件夹
 //用于向文件夹中输出文件
gulp.task(name,[deps],fn)
 //定义一个任务
gulp.watch()
 //监视文件的变化

• 合并js文件

//下载插件
npm install gulp-concat gulp-uglify gulp-rename --save-dev

//gulpfile.js配置

var gulp = require('gulp');
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var rename = require('gulp-rename')

// 注册合并压缩js的任务
gulp.task('js', function () {
  return gulp.src('./src/js/*.js')       //找到目标原文件，将数据读取到gulp的内存中
    .pipe(concat('build.js'))           //临时合并文件
    .pipe(gulp.dest('./dist/js/'))     //输出文件到本地
    .pipe(uglify())                   //压缩文件
    .pipe(rename({ suffix: '.min' }))//重命名
    .pipe(gulp.dest('./dist/js/'))
});

• 处理css

//下载插件
npm install gulp-less gulp-clean-css --save-dev

//gulpfile.js配置

var concat = require('gulp-concat')
var rename = require('gulp-rename')
var less = require('gulp-less')
var cssClean = require('gulp-clean-css')

// 注册转换less的任务
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less())          //编译less文件为css文件
    .pipe(gulp.dest('./src/css/'))
});

// 注册合并压缩css文件
gulp.task('css', function () {
  return gulp.src('./src/css/*.css')
    .pipe(cssClean())
    .pipe(concat('build.css'))   //合并
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssClean({ compatibility: 'ie8' }))
    .pipe(gulp.dest('dist/css/'))
});

• 执行异步任务、任务之间解决依赖关系

参考

• 处理html

//下载插件
npm install gulp-htmlmin --save-dev

//gulpfile.js配置

var htmlMin = require('gulp-htmlmin')

// 注册压缩html的任务
gulp.task('html', function () {
  return gulp.src('./index.html')
    .pipe(htmlMin({collapseWhitespace:true}))
    .pipe(gulp.dest('./dist/'))
})

• 自动编译

 //下载插件
npm install gulp-livereload --save-dev

//gulpfile.js配置

var livereload = require('livereload')

// 注册监视任务(半自动)
gulp.task('watch', gulp.series('default', function() {
  // 开启监听
  livereload.listen();
  // 确认监听的目标以及绑定相应的任务  
  gulp.watch('src/js/*.js', gulp.series('js'))
  gulp.watch(['src/css/*.css', 'src/less/*.less'], gulp.series('css'))
}))

• 热加载（实时加载）

//下载插件 gulp-connect  open
npm install gulp-connect --save-dev
npm i open -D

var connect = require('gulp-connect')
var open = require('open')

// 注册监视任务(全自动)
gulp.task('server', gulp.series('default', function () {
  // 配置服务器的选项
  connect.server({
    root:'dist/',
    livereload:true,  //实时刷新
    port:5000
  })

  //open可以自动打开指定的链接
  open('http://localhost:5000')
  
  // 确认监听的目标以及绑定相应的任务
  gulp.watch('src/js/*.js', gulp.series('js'))
  gulp.watch(['src/css/*.css', 'src/less/*.less'], gulp.series('css'))
}))

• 扩展

//打包加载gulp插件
//前提：将插件下载好
//下载打包插件：gulp-load-plugins
npm install gulp-load-plugins --save-dev

//引入: 
var $ = require('gulp-load-plugins')();