前端自动化工具gulp初体验

安装

项目目录内还要将 gulp 安装到依赖中

npm install gulp -g
npm install gulp -g --save-dev

一般使用了构建工具之后,编译后的代码是要单独打包出来的,所以,新建一个项目目录

/app
-- /js
---- index.js
-- /css
---- index.css
/dist
-- /js
-- /css
-- index.html
gulpfile.js
package.json

gulpfile.js 是 gulp 的配置文件,名称是固定的,就像 npm 的 package.json 一样

插件

目前可以让浏览器支持 es6语法的插件,应用最广泛的就是babel了, 安装 babel

npm install --save-dev gulp-babel babel-preset-es2015
// babel -preset-es2015是指定转为 es6 的语法

还有一些其他的 gulp 插件

// 压缩 css
npm install gulp-cssnano --save-dev

//压缩 js
npm install gulp-uglify --save-dev

// less
npm install gulp-less --save-dev

配置 gulpfile

// 将插件引入
var gulp = require('gulp')
var babel = require('gulp-babel')
var cssnano = require('gulp-cssnano')
var uglify = require('gulp-uglify')
var less = require('gulp-less')

// gulp.task(任务名称, function() {
//  gulp.src('目标文件').pipe(使用什么模块后者插件编译).dest('输出的文件地址')
//})

// 编译 less
gulp.task('testLess', function () {
    // gulp.src('./app/css/index.css')
    // 通配符 匹配 ./app/css/下的所有 css 文件
    gulp.src('./app/css/*.css')
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('./dist/css'))
})

// 转换 es6
gulp.task('testEs6', function () {
    gulp.src('./app/js/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})

gulp.task('default', ['testLess', 'testEs6'])

gulp的思想是数据流,一个任务像流水一样往后走一直到最后结束

自动检测

gulp.task('watch',function(){
    // 深度检测当前目录下的所有子文件
    gulp.watch('./app/css/**/*.css',['testLess']);
    gulp.watch('./app/js/**/*.css',['testEs6']);
    gulp.watch('./dist/index.html',['testLess']);
})

运行

命令行运行 gulp默认运行 gulp 是执行了 gulp default 命令,所以执行的时候如果直接运行 gulp那么在 gulpfile内就要有一个 default 任务,否则就运行单个任务

// 默认执行 gulp就是执行了
gulp.task('default', ['testLess', 'testEs6'])

// 执行单个任务
gulp taskName