Gulp

一， gulp工具 用自动化构建工具增强你的工作流程 ， gulp

安装Gulp工具 ， 是基于node.js环境的 ， 所以要现有node.js环境才行。

npx 不需要安装到电脑里就可以用 ，gulp将开发流程中让人痛苦或耗时的任务自动化 ，从而减少你所浪费的时间 ， 创造更大价值

安装

npm i -D gulp npm install – global gulp-cli 在命令行中去使用gulp命令 npm install --save-dev gulp 在代码中去使用 require(‘gulp’)

要先 npm init 初始化，把package.json文件配好了 ，然后在要写gulp的路径下 安装 -D gulp

cnpm install gulp npm init 2.创建gulpfile.js文件

做任务的文件 gulpfile.js 是node中的文件 比如引入

var path = require('path); var fs = require('fs');

3.任务

一个任务就是一个函数

每个gulp任务（task) 都是一个异步的JS函数 。 此函数是一个可以接收callback作为参数的函数 ， 或者是一个返回stream ， promise ，event emitter ，child process 或 observable类型值的函数 ，由于某些平台的限制 而不支持异步任务， 因此gulp还提供了一个替代品 。

function defaultTask(){ console.log(123); } module.exports={ default : defaultTask }

在命令行里输入 gulp default ，

如何让这个函数结束呢 ？ callback ，stream ， promise ，event emitter ，child process 或 observable

function defaultTask(cb){ console.log(123); cb(); } module.exports={ default : defaultTask //当任务的名字是default 可以省略。 只去调用命令gulp }

4.gulp方法

gulp的工具常见方法

src() ： 创建一个流， 用于从文件系统读取 vinyl对象（虚拟的文件格式） dest() : 创建一个用于将Vinyl 对象写入到文件系统的流 series() : 任务按顺序执行 parallel() ： 任务同时执行 watch（）：监听文件改变并在发生更改时运行任务 pipe() : 连接转换流或可写流 （可以理解成jquery中的链式操作）

var { series ,parallel , src , dest} = require('gulp'); function defaultTask(cb){ console.log(123) } function txtTask(){ return src('./src/*.txt').pipe( dest('./dist') ) //pipe管道不需要引用 可以用 .dest写入dist文件（没有也可以自己创建） } module.exports = { default : defaultTask, testTask : testTask, all : series(defaultTask , testTask) }

5.gulp常见任务 ：css

gulp-sass :sass处理 cnpm i -D gulp -sass

var sass = require('gulp-sass') function sassTask(){ return src('./src/*.scss').pipe( sass() ).pipe( dest('./dist') ) } module.exports = { sass : sassTask }

gulp-autoprefixer 自动添加浏览器前缀

var autoprefixer= require('gulp-sass') function autoTask(){ return src('./src/*.scss').pipe( autoprefixer({ browsers: ['last 2 versions', 'Android >=4.0' ,'<5%'] //配置 }) ).pipe( dest('./dist') ) } module.exports = { auto: autoTask }

gulp-cssmin : 压缩css文件

cnpm i gulp-cssmin

var cssmin = require('') function cssminTask(){ return src('./src/*.css').pipe( cssmin() ).pipe( dest('./dist') ); } module.exports{ cssmin: mincssTask }

cnpm i -D gulp-rename 重命名文件

var rename = require('gulp-rename') function cssTask(){ return src('./src/*.scss') .pipe( sass() ) .pipe( autoprefixer() ) .pipe( cssmin() ) .pipe( rename(function(path)){ path.basename = path.basename + '.min' ; }) .pipe( dest('./dist') ); }

gulp-clean 文件清理

cnpm i -D gulp-clean

var clean = require('gulp-clean') function cleanTask(){ return src('./dist').pipe( clean() ) } function cleanTask(){ return src('./dist'，{allowEmpty : true}).pipe( clean() )//允许为空。表示可以忽略文件的存在 }

6.javascript

gulp-babel :把es6变成es5 view gulp-babel versions 查看版本

babeljs.io

安装 在指定的目录下 ： cnpm i -D gulp-babel@7.0.0

gulp-uglify :把JS文件进行压缩的操作， 要先把es6转成es5 然后再压缩。

gulp-requirejs-optimize: 把require.js的模块进行合并

7.html

gulp-htmlmin : 把html文件进行压缩处理

var function htmlminTask(){ return src('./src/*.html') .pipe( htmlmin({ collapseWhite : true, removeEmptyAttributes: true, minifyCSS: true, miniJS: true, removeComments : true }) ) .pipe( dest('./dist') ) } module.exports = { html : htmlminTask }

gulp-file-include : 把html做成片段 @include(‘head.html’)

gulp-concat : 合并文件

gulp-if : 写任务的时候 ， 可以进行条件处理的 。 gulp-webserver : 开启一个web服务器

function webserverTask(){ return src('./dist') .pipe(webserver({ host : 'localhost', port: 4000, open: './index.html', livereload : true // 热更新， 不刷新浏览器也能更新内容 })) }