gulp 基本配置
gulp
使用中，还会继续完善
异步多任务
npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help
src(filePath/pathArr)
指向指定路径的所有文件，返回文件流对象；用于读取文件
dest(dirPath/pathArr)
指向指定的所有文件夹
-
cnpm install gulp@3.9.1 --save-dev 如果是gulp低版本，node最新版本不支持（我们现在都直接使用gulp4版本，笔记是gulp3，下面有gulp4的配置代码）
-
创建一个gulpfile.js的文件，专门让gulp去编写任务的。
gulpfile.js中，使用commIS规范
- require() 将这个模块引入
- 使用这个模块上的函数
-
在gulpfile.js中编写任务，需要在控制台通过 gulp任务名，运行你编写好的任务
第一个参数：任务的名字 自定义
第二个参数：回调函数，任务执行的功能gulp.src() 找到源文件路径
gulp.dest() 找到目的文件路径 【注】如果设置的这个目的文件路径不存在，会自动创建
pipe() 理解程序运行管道- 整理 .html文件
gulp.task("copy-html", function(){ return gulp.src("index.html") .pipe(gulp.dest("dist/")) })// 注册压缩html的任务 gulp.task('html', function(){ return gulp.src('index.html') .pipe(htmlmin({collapseWhitespace: true})) })- 静态文件 拷贝图片
gulp.task("images", function(){ // return gulp.src("img/*.jpg") // return gulp.src("img/*.{jpg,png}") return gulp.src("img/**/*") .pipe(gulp.dest("dist/images")) })- 拷贝多个文件到一个目录中
gulp.task("data", function(){ return gulp.src(["json/*.json","xml/*.xml","!xml/4.xml"]) // 将 !xml/04.xml 剔除掉 .pipe(gulp.dest("dist/data")) })- 一次性执行多个任务的操作
gulp.task("build", ["copy-html", "images", "data"], function(){ console.log("任务执行完毕") })- 监听，如果监听到文件有改变，会自动去执行对应的任务，更新数据
cmd cnpm gulp watch
gulp.watch("index.html", ["copy-html"]); // 第二个参数是数组 gulp.watch("img/**/*", ["images"]); gulp.watch(["json/*.json","xml/*.xml","!xml/4.xml"], ["data"]); -
使用第三方插件步骤：commonJS规范
<1>先去下载插件到本地
cnpm install 插件名字 --save-dev
cnpm i 插件名字 -D
<2>通过require()引入文件
<3>查阅插件的用法
处理css插件
```
// gulp-sass
const sass = require("gulp-sass");
// 压缩css gulp-minify-css
const minifyCSS = require("gulp-minify-css");
// 重命名插件 gulp-rename
const rename = require("gulp-rename");
// cssClean({compatibility: 'ie8'}) gulp-clean-css
gulp.task("sass", function(){
return gulp.src("stylesheet/index.scss")
.pipe(sass())
.pipe(minifyCSS())
.pipe(rename("index.min.css"))
.pipe(gulp.dest("dist/css"))
})
gulp.task("css", ["sass"] function(){ // 异步要做处理
})
```
处理js文件的插件
```
// gulp-concat 合并文件（将文件合并）
const concat = require("gulp-concat");
// gulp-uglify 压缩.js
const uglify = require("gulp-uglify");
gulp.task("script", function(){
return gulp.src("js/*.js")
.pipe(concat("index.js"))
.pipe(uglify())
.pipe(rename("index.min.js")) // {suffix: '.min'}
.pipe(gulp.dest("dist/js"))
// .pipe(connect.reload()) // 添加livereload后每个任务都需要监听一下
})
```
```
// gulp-connect 来启动一个服务器
const connect = require("gulp-connect");
gulp.task("server", function(){
connect.server({
root: "dist", // 设置根目录
port: "8888",
livereload: true, // 启动实时刷新功能
})
})
```
同时启动监听和服务 default我们可以直接在控制台通过 gulp命令启动
gulp.task("default", ["watch", "server"])
重点：jQuery编写的代码大家不要合并和压缩
注册任务写return是异步的，不写是同步的
以上是gulp3基本笔记，下面是gulp4 gulpfile.js代码，可实现实时刷新及代理
const { series, parallel, task, src, dest, watch } = require('gulp'),
uglify = require('gulp-uglify'), // 压缩js
connect = require("gulp-connect"),
{ createProxyMiddleware } = require('http-proxy-middleware'),
babel = require('gulp-babel'),
autoprefix = require('gulp-autoprefixer'), // CSS前缀
htmlmin = require('gulp-htmlmin'), // HTML压缩
del = require('del'), // 清空指定文件夹
open = require('gulp-open'),
ip = require('ip'), // 本地IP
// host = ip.address(),
host = 'localhost',
port = '8888',
app = { // 定义目录
srcPath: 'src/',
buildPath: 'build/',
distPath: 'dist/'
}
task('lib', function () {
return src(app.srcPath + 'lib/**/*')
.pipe(dest(app.distPath + 'lib'))
.pipe(connect.reload())
})
task('js', function () {
return src(app.srcPath + 'js/*.js')
.pipe(babel({
presets: ['babel-preset-env']
}))
.pipe(uglify())
.pipe(dest(app.distPath + 'js'))
.pipe(connect.reload())
})
task('html', function () {
return src(app.srcPath + '**/*.html') /*src下所有目录下的所有.html文件*/
.pipe(dest(app.distPath))//gulp.dest 要把文件放到指定的目标位置
.pipe(connect.reload()) // 当内容发生改变时，重新加载。
})
const htmlMin = function () { // html压缩
return new Promise(resolve => {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
src(app.srcPath + '**/*.html')
.pipe(htmlmin(options))
.pipe(dest(app.distPath))
resolve();
});
};
task('css', function () {
return src(app.srcPath + 'css/*.css')
.pipe(autoprefix('last 3 versions')) // 前缀
.pipe(dest(app.distPath + 'css'))
.pipe(connect.reload())
})
task("images", function () {
return src(app.srcPath + 'images/**/*')
.pipe(dest(app.distPath + 'images'))
.pipe(connect.reload())
})
task('watch', function () {
watch(app.srcPath + "**.html", series("html"));
watch(app.srcPath + "images/**/*", series("images"));
watch(app.srcPath + "js/*.js", series("js"));
watch(app.srcPath + "css/*.css", series("css"));
});
task("server", function () {
connect.server({
root: "dist", // 设置根目录
// root: "src", // 设置根目录
host: host,
port: port,
livereload: true, // 启动实时刷新功能
middleware: function (connect, opt) {
return [
createProxyMiddleware('/fs', {
target: 'https://www.lagou.com',
changeOrigin: true,
pathRewrite: { // 路径重写规则
'^/fs': ''
}
})
]
}
})
})
const openInBrowser = function () {
return new Promise(resolve => {
let options = {
uri: 'http://' + host + ':' + port,
// app: 'chrome' // 指定浏览器打开
};
src(__filename)
.pipe(open(options));
resolve();
})
};
const cleanBuild = function () {
// 清除build下的文件
return del([
// 'dist/report.csv',
// 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
app.distPath + '**/*',
// 我们不希望删掉这个文件，所以我们取反这个匹配模式
// '!dist/mobile/deploy.json'
]);
};
// npm install --save-dev minimist gulp-util
const minimist = require('minimist'); // 参数解析引擎
const gutil = require('gulp-util');
// 默认development环境
var knowOptions = {
string: 'env',
default: {
env: process.env.NODE_ENV || 'development'
}
};
var options = minimist(process.argv.slice(2), knowOptions);
// console.log(process.env)
// console.log(process.env.NODE_ENV)
// console.log(process.argv);
// console.log(process.argv.slice(2)); // [] [ 'build', '--env', 'production' ]
// console.log(options); // { _: [], env: 'development' } { _: [ 'build' ], env: 'production' }
// 生成filename文件，存入string内容
function string_src(filename, string) {
var src = require('stream').Readable({ objectMode: true })
src._read = function () {
this.push(new gutil.File({ cwd: "", base: "", path: filename, contents: new Buffer(string) }))
this.push(null)
}
return src
}
task('constants', function() {
// 读入config.json文件
var myConfig = require('./config.json');
// 取出对应的配置信息
var envConfig = myConfig[options.env];
// console.log(JSON.stringify(envConfig)); // {"apiUrl":"http://applicationName.com/api/projectName/"}
var conConfig = 'var apiConfig = ' + JSON.stringify(envConfig);
// 生成config.js文件
return string_src("config.js", conConfig)
.pipe(dest(app.distPath))
});
// 启动服务 命令：gulp
// task('default', series(parallel(connectServe, watchCode, openInBrowser)));
task('dev', series(['html', 'js', 'lib', 'css', 'images']));
task('default', series('constants', parallel('server', 'watch', 'dev', openInBrowser)));
// 打包压缩 命令：gulp build --env production
task('dist', series(['js', 'lib', 'css', 'images']));
// task('build', series(cleanBuild, parallel(htmlMin, imgMin, cssMin, jsMin)));
task('build', series(cleanBuild, parallel('constants', 'dist', htmlMin)));
config.json
{
"development": {
"apiUrl": "/fs"
},
"production": {
"apiUrl": "http://applicationName.com/api/projectName/"
}
}
.babelrc
{
"presets": [
"es2015"
],
"plugins": []
}
package.json
"devDependencies": {
"@babel/core": "^7.10.3",
"@babel/preset-env": "^7.10.3",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^7.0.1",
"gulp-connect": "^5.7.0",
"gulp-htmlmin": "^5.0.1",
"gulp-open": "^3.0.1",
"gulp-uglify": "^3.0.2",
"gulp-util": "^3.0.8",
"http-proxy-middleware": "^1.0.4",
"ip": "^1.1.5",
"minimist": "^1.2.5"
}
