工程化项目之gulp
1、nodejs的安装：
注：安装nodejs前需要Python解释器，推荐2.7版本！
测试安装成功否：
打开cmd `node -v`
模块化
- 核心 :
- 1. 引入
- require(路径)
- 2. 定义
- module.exports = {}
依赖管理工具 npm
1. 制造一个依赖配置详情(使用说明书)
2. 根据依赖说明书自动进行配置;
3. 安装第三方插件; web 第三方插件可以用cdn引入， nodejs都会把第三方依赖下载到本地;
4. 卸载第三方插件;
区分安装环境 :
- 1. 局部安装(在当前文件夹下可用)
- 2. 全局安装(在任意位置可用)
1. 下载 局部gulp的安装 : `npm install gulp --save-dev`
- 观察文件之中多出了啥 => node_modules
- 观察package.json里面多出了啥 => 开发环境依赖项 devDependencies
2. 下载 局部gulp-cli的安装 : `npm install gulp-cli -g`
3. 使用gulp指令; 测试gulp是否可用;
`gulp -v`
成功的结果应该显示 ：
> CLI version: 2.2.0
> Local version: 4.0.2
基本配置
1. 在项目根目录之中建立一个gulpfile.js, 用来配置gulp所有的行为;
使用：
1. task 指令 -> 给gulp绑定一个指令，让gulp可以识别指令并替我们完成工作
2. src 找到源文件的指令 => 返回一个gulp的流;
3. pipe 处理gulp文档流的api;
4. dest 转存, 和 pipe 配合使用。
`gulp.task( "指令名" , ()=>{ 指令行为 })`
其他工具：
gulp-babel
del 删除工具
gulp-connect 服务器环境
gulp-cssnano css压缩工具
gulp-minify-html HTML压缩工具
gulp-rev 实时刷新工具
gulp-sass 支持scss
gulp-uglify
http-proxy-middleware
package.json的配置如下：
{
"name": "projectss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"del": "^5.1.0",
"gulp-babel": "^8.0.0",
"gulp-connect": "^5.7.0",
"gulp-cssnano": "^2.1.3",
"gulp-minify-html": "^1.0.6",
"gulp-rev": "^9.0.0",
"gulp-rev-collector": "^1.3.1",
"gulp-sass": "^4.0.2",
"gulp-sass-china": "^3.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"http-proxy-middleware": "^1.0.3",
"node-sass": "^4.13.1"
},
"dependencies": {
"gulp": "^4.0.2",
"gulp-file-include": "^2.1.1"
}
}
构建启动指令：
var mode = process.argv[2];
switch( mode ){
case "dev" :
require("./gulpfile.dev.js");
break;
case "build":
require("./gulpfile.build.js");
}
开发环境：
let gulp = require("gulp");
let connect = require("gulp-connect");
let proxy = require("http-proxy-middleware").createProxyMiddleware;
let fileinclude = require("gulp-file-include");
let sass = require('gulp-sass');
sass.compiler = require('node-sass');
let del = require("del");
let connect_options = {
root : "./dist",
port : 3000,
livereload : true,
middleware : function(){
return [
proxy( "/pxx" , {
changeOrigin : true,
pathRewrite : {
"/pxx": ""
}
}),
proxy("/dt", {
changeOrigin : true,
pathRewrite : {
"/dt": ""
}
}),
proxy("/lg", {
changeOrigin : true,
pathRewrite : {
"/lg": ""
}
})
]
}
}
gulp.task("dele", async()=>{
await del(['./dist/**/*']);
})
gulp.task('connect' , async ()=> {
connect.server(connect_options);
});
gulp.task("html" , async ()=>{
gulp.src(["./src/html/**/*.html","!./src/html/**/header.html"])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest("./dist/"))
.pipe(connect.reload())
});
gulp.task("javascript" , async()=>{
gulp.src(["./src/javascripts/**/*.js"])
.pipe(gulp.dest("./dist/javascripts"))
.pipe(connect.reload())
});
gulp.task("css" , async()=>{
gulp.src(["./src/stylesheets/*.css"])
.pipe(gulp.dest("./dist/stylesheets"))
.pipe(connect.reload())
});
gulp.task("scss" , async ()=>{
gulp.src(["./src/scss/*.scss"])
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("./dist/stylesheets/"))
.pipe(connect.reload())
})
gulp.task("watch",async ()=>{
gulp.watch(["./src/html/**/*.html"] , gulp.series("html"));
gulp.watch(["./src/javascripts/*.js"] , gulp.series("javascript"));
gulp.watch(["./src/stylesheets/*.css"] , gulp.series("css"));
gulp.watch(["./src/scss/**/*.scss"] , gulp.series("scss"));
})
gulp.task("dev", gulp.parallel("watch", "connect" ,gulp.series("dele","html","javascript","css", "scss")));
生产环境：
let gulp = require("gulp");
let babel = require('gulp-babel');
let del = require("del");
let uglify = require("gulp-uglify");
let cssnano = require("gulp-cssnano");
let sourcemaps = require('gulp-sourcemaps');
let rev = require("gulp-rev");
let revCollector = require('gulp-rev-collector');
let minifyHtml = require('gulp-minify-html');
let fileinclude = require("gulp-file-include");
let sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task("dele", async()=>{
await del(['./dist/**/*']);
})
gulp.task("js" , async()=>{
gulp.src(["./src/javascripts/**/*.js"])
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(rev())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./dist/javascripts"))
.pipe(rev.manifest())
.pipe(gulp.dest( 'rev/js' ) );
})
gulp.task("css" , async()=>{
gulp.src(["./src/stylesheets/*.css"])
.pipe(sourcemaps.init())
.pipe(cssnano())
.pipe(rev())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./dist/stylesheets/"))
.pipe(rev.manifest())
.pipe( gulp.dest( 'rev/css' ) );
})
gulp.task("html" , async()=>{
gulp.src(["rev/**/*.json","./src/html/**/*.html"])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(revCollector({
replaceReved: true,
}))
.pipe(minifyHtml())
.pipe(gulp.dest("./dist/"))
})
gulp.task("scss" , async ()=>{
gulp.src(["./src/scss/*.scss"])
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(cssnano())
.pipe(rev())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./dist/stylesheets/"))
.pipe(rev.manifest())
.pipe( gulp.dest( 'rev/css' ) );
})
gulp.task("build", gulp.series("dele","js","css","html","scss"));
工程化项目之gulp
