最近遇到一个问题，我有一个普通的小项目，很简单，页面也就十几个，但是后天都是 restful 的接口，不能后端渲染。
这样一个小项目完全没必要做成 SPA 项目，复杂度高还麻烦，SEO 不够友好，而且项目再小它也有公共的页头，页尾,html 里面又不支持include 或者类似的标签，能直接导入一个html片段。
遇到这种情况自然就想到了 nodejs ，百度一下有很多解决方案，比如 webpack ，gulp 等。
最后我选择了 gulp 使用起来非常方便。而且插件很多，很全。比如：
var
gulp
=
require
(
'gulp'
),
fileinclude
=
require
(
'gulp-file-include'
), // 页头页尾 直接使用 @@include 包含进去，而且还支持参数。
sass
=
require
(
'gulp-sass'
), // sass scss 文件编译
connect
=
require
(
'gulp-connect'
), // 前段web服务，测试起来非常方便 支持添加代理配置
concat
=
require
(
'gulp-concat'
), // css js image 文件合并，减少 js css 请求次数，提高效率，image 统一目录
uglify
=
require
(
'gulp-uglify'
), // js 文件压缩
clearcss
=
require
(
'gulp-clean-css'
); // css 文件压缩
而且使用起来也不麻烦，非常方便。没有多余配置。编译完成后直接完整目录覆盖线上项目目录。下面给出完整 gulpfile.js
var
gulp
=
require
(
'gulp'
),
fileinclude
=
require
(
'gulp-file-include'
),
sass
=
require
(
'gulp-sass'
),
connect
=
require
(
'gulp-connect'
),
concat
=
require
(
'gulp-concat'
),
uglify
=
require
(
'gulp-uglify'
),
clearcss
=
require
(
'gulp-clean-css'
);
gulp
.
task
(
'fileinclude'
,
function
(){
gulp
.
src
([
'./src/*.html'
])
//主文件
.
pipe
(
fileinclude
({
prefix
:
'@@'
,
//变量前缀 @@include
basepath
:
'./src/include'
,
//引用文件路径
indent
:
true
//保留文件的缩进
}))
.
pipe
(
gulp
.
dest
(
'./dist'
));
//输出文件路径
});
gulp
.
task
(
'sass'
,
function
(){
gulp
.
src
([
'src/css/*.sass'
,
'src/css/*.css'
])
//多个文件以数组形式传入
.
pipe
(
sass
())
.
pipe
(
clearcss
())
.
pipe
(
gulp
.
dest
(
'./dist/static/css'
));
//将会在src/css下生成index.css以及detail.css
});
gulp
.
task
(
'webserver'
,
function
(){
connect
.
server
({
name
:
'xmr'
,
root
:
'dist'
,
port
:
8080
,
livereload
:
true
});
});
gulp
.
task
(
'fileconcat'
,
function
(){
gulp
.
src
([
'src/js/*.js'
])
.
pipe
(
concat
(
'main.js'
))
.
pipe
(
uglify
())
.
pipe
(
gulp
.
dest
(
'./dist/static/js'
));
gulp
.
src
([
'src/image/*.*'
])
.
pipe
(
gulp
.
dest
(
'./dist/static/image'
));
gulp
.
src
([
'src/data/*.*'
])
.
pipe
(
gulp
.
dest
(
'./dist/data'
));
});
gulp
.
task
(
'watch'
,
function
()
{
gulp
.
watch
([
'./src/*.html'
],
[
'default'
]);
});
gulp
.
task
(
'default'
,[
'fileinclude'
,
'sass'
,
'webserver'
,
'watch'
,
'fileconcat'
],
function
()
{
console
.
log
(
'build is ok.'
)
});
项目启动直接指向 gulp 没有其他参数，使用默认任务 default
package.json
{
"name"
:
"monero-china"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"gulpfile.js"
,
"scripts"
:
{
"test"
:
"echo
\"
Error: no test specified
\"
&& exit 1"
},
"author"
:
""
,
"license"
:
"ISC"
,
"devDependencies"
:
{
"gulp"
:
"^3.9.1"
,
"gulp-concat"
:
"^2.6.1"
,
"gulp-connect"
:
"^5.5.0"
,
"gulp-file-include"
:
"^2.0.1"
,
"gulp-sass"
:
"^3.1.0"
,
"gulp-uglify"
:
"^3.0.0"
,
"gulp-clean-css"
:
"^3.9.3"
},
"dependencies"
:
{
"lodash"
:
"^4.17.5"
}
}
项目目录
project-name
|------src
| -----include
|------header.html
|------footer.html
|------js
|------css
|------image
|------index.html
| -----gulpfile.js
|------package.json