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