Gulpjs 个人使用指南

Gulpjs 个人使用指南

1、基础安装

#————01、安装gulp命令行工具
npm i --global gulp-cli

#————02、创建项目目录并进入
npx mkdir proj
cd proj

#————03、NPM初始化,创建package.json文件
npm init

#————04、安装gulp，并作为开发依赖
npm i --save-dev gulp

#————05、 检查gulp版本
gulp --version

2、gulpfile 配置文件

//————gulpfile.js
function defaultTask(cb){
    cb();
}
exports.default = defaultTask

//————执行单任务与多任务
gulp
gulp task1 task2

3、task的组合： Series( ) 和 parallel( )

//————当任务是一组时，使用 series()函数来组合任务
const {series} = require('gulp');

function clean(cb){ cb(); }
function build(cb){ cb(); }

exports.build = build;
exports.default = series(clean,build);
//————clean未被直接Export，称为私有任务private task
//————build直接被export，称为公有任务public task
//————尽量避免使用旧版本的 task() 来管理task

//———— series()和parallel()都可以组合任务，但是希望任务顺序执行时，请使用 series()
//———— 并发形任务，使用 parallel()
//———— 什么是并发：即多任务处理不产生相关依赖时,如
const {parallel} = require('gulp');

function javascript(cb){ cb(); }
function css(cb){ cb(); }

exports.build = parallel(javascript,css);

//————任务只关注任务，组合需要改变时，
if( process.env.NODE_ENV == 'production'){
    exports.build = series(transpile,minify);
}else{
    exports.build = series(tranpile,livereload);
}

//———— async/await
const fs = require('fs');
aysnc function asyncAwaitTask(){
    const {version}	= fs.readFileSync('package.json');
    console.log(version);
    await Promise.resolve('some result');
}
exports.default = asyncAwaitTask;

4、gulp 处理文件

//————读取和输出
const {src,dest} = require('gulp');

exports.default = function(){
    return src('js/functions.js')
    	.pipe( dest('dist/') );
}

//————读取-转换-输出
const {src,dest} = require('gulp');
const babel = require('gulp-babel');

exports.default = function(){
    return src('js/functions.js')
    	.pipe( babel() )
    	.pipe( dest('dist/') );
}

//————混淆
const {src,dest} = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

exports.default = function(){
    return src('js/functions.js')
    	.pipe( babel() )
    	.pipe( src('vendor/functions2.js') )  // 添加文件
    	.pipe( uglify() )	// 压缩混淆
    	.pipe( dest('dist/') );
}

//————压缩的文件和未压缩的文件：rename()
const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/'))	// 输出未压缩 example.js
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))	//输出 example.min.js
    .pipe(dest('output/'));
}

5、gulp插件

• gulp-file-include html模板组合利器