要使用gulp要保证你的电脑上要有node环境
官方建议你这么安装它
//全局安装gulp命令行 $ npm install gulp-cli -g //gulp4.0 $ npm install gulp@next -D //gulp3.9.1 $ npm install gulp -D //创建gulpfile.js文件 $ touch gulpfile.js $ gulp --helpgulp4在gulp3的基础上新增了几个函数,但它的使用依旧简单方便。一共如下10个: - gulp.src() –全局匹配一个或多个文件 - gulp.dest() –将文件写入目录 - gulp.symlink() –与dest相似,但是使用软连接形式 - gulp.task() –定义任务 - gulp.lastRun() –获得上次成功运行的时间戳 - gulp.parallel() –并行运行任务 - gulp.series() –运行任务序列 - gulp.watch() –当文件发生变化时做某些操作 - gulp.tree() –获得任务书树 - gulp.registry() –获得或注册任务
官方说明API说明:https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp4不再能够通过数组形式传入任务,你需要使用gulp.series()和gulp.parallel()来执行他们。例如:
gulp.task('default',gulp.parallel('taskA','taskB'));//并行执行 gulp.task('default',gulp.series('taskA','taskB'));//按顺序执行parallel和series函数可以接受函数作为参数,这意味着我们可以将任务用独立函数表示:
funcion taskA(){...} funcion taskB(){...} gulp.task(taskA);//最简单的方式 gulp.task('i-am-taskB',taskB);//为taskB添加任务名 gulp.task('taskA-taskB', gulp.series(taskA, taskB));//序列执行 gulp.task('taskA-taskB', gulp.parallel(taskA,taskB));//并行运行而且当我们执行序列化任务时,面板的输出也更加清晰
PS D:\github\resume> gulp [21:49:59] Using gulpfile D:\project\gulpfile.js [21:49:59] Starting 'default'... [21:49:59] Starting 'copyfile'... [21:49:59] Finished 'copyfile' after 90 ms [21:49:59] Starting 'minifyhtml'... [21:49:59] Finished 'minifyhtml' after 171 ms [21:49:59] Starting 'minifyCSS'... [21:50:00] Finished 'minifyCSS' after 353 ms [21:50:00] Starting 'uglyfyJS'... [21:50:01] Finished 'uglyfyJS' after 1.43 s [21:50:01] Finished 'default' after 2.05 s例如
gulp.lastRun('someTask', 1000) // 1426000004000. gulp.lastRun('someTask', 100) // 1426000004300.示例gulpfile.js
gulp.task('one', function(done) { // do stuff done(); }); gulp.task('two', function(done) { // do stuff done(); }); gulp.task('three', function(done) { // do stuff done(); }); gulp.task('four', gulp.series('one', 'two')); gulp.task('five', gulp.series('four', gulp.parallel('three', function(done) { // do more stuff done(); }) ) );实例输出
gulp.tree() // output: [ 'one', 'two', 'three', 'four', 'five' ] gulp.tree({ deep: true }) /*output: [ { "label":"one", "type":"task", "nodes":[] }, { "label":"two", "type":"task", "nodes":[] }, { "label":"three", "type":"task", "nodes":[] }, { "label":"four", "type":"task", "nodes":[ { "label":"<series>", "type":"function", "nodes":[ { "label":"one", "type":"task", "nodes":[] }, { "label":"two", "type":"task", "nodes":[] } ] } ] }, { "label":"five", "type":"task", "nodes":[ { "label":"<series>", "type":"function", "nodes":[ { "label":"four", "type":"task", "nodes":[ { "label":"<series>", "type":"function", "nodes":[ { "label":"one", "type":"task", "nodes":[] }, { "label":"two", "type":"task", "nodes":[] } ] } ] }, { "label":"<parallel>", "type":"function", "nodes":[ { "label":"three", "type":"task", "nodes":[] }, { "label":"<anonymous>", "type":"function", "nodes":[] } ] } ] } ] } ] */这是一个用于自动加载插件的gulp插件,安装如下:
npm install gulp-load-plugins -D当一个项目需要很多插件来管理的时候,你的gulpfile.js可能会变成这样:
var gulp = require('gulp'), a = require('gulp-a'), b = require('gulp-b'), c = require('gulp-c'), ... ... z = require('gulp-z');使用gulp-load-plugins可以让你少写一些重复代码,你可以这样使用:
var gulp = require('gulp'); //加载gulp-load-plugins插件,并马上运行它 var plugins = require('gulp-load-plugins')(); //或是: //var gulpLoadPlugins = require('gulp-load-plugins'); //var plugins = gulpLoadPlugins();调用插件
plugins.clone() //等价于require('gulp-clone')();实质上是gulp帮助我们做了如下操作
plugins.clone= require(‘gulp-clone’);