共计 3252 个字符，预计需要花费 9 分钟才能阅读完成。
使用 GULP 构建工具对 Metronic 进行管理
部署 gulp
打开终端并进入到 Metronic 的 theme 根目录，运行以下代码
$ npm install // 安装程序的依赖包
发现 npm install 报 node-sass 错误原因: npm install 的时候所下载的 node-sass 文件夹是空的在 C:UsersadminAppDataRoamingnpm-cachenode-sass3.13.1 下面可以看到解决方法: 自己单独用 npm i node-sass 下载一遍会在 C:Users 姓名 AppDataRoamingnpm-cachenode-sass4.7.2 下面会有一个文件 win32-x64-57_binding.node , 把这个文件复制到 3.13.1 下面然后重新 npm install 就解决了
全局安装 gulp
$ npm install gulp -g
测试 gulp，在终端输入 gulp 报错 Cannot find module ‘gulp-prettify’ 模块找不到进入 npm 搜索包名并安装
$ npm i gulp-prettify
再次执行 gulp 命令, 出现错误
$ gulp
[09:53:07] Using gulpfile F:\web\metronic_v4.5.2\theme\gulpfile.js
[09:53:07] Task never defined: default
[09:53:07] To list available tasks, try running: gulp –tasks
说明 gulp 部署成功，只是默认任务还没有配置, 需要看看 gulpfile.js 列出的其他任务。
如果有其他问题，请参考 [转] 初探前端自动化神器（Gulp）[转]Bootstrap 之 Metronic 模板的学习之路 –（7）GULP 前端自动化工具
gulp 任务运用
gulp localhost
安装 Connect 插件
npm install–save-dev gulp-connect
npm install –save-dev 可以简化为 npm i -D
为 web 服务器定义一个任务，gulpfile.js 文件中添加
gulp.task(‘localhost’, function() {
connect.server();
});
只要在终端 / 命令行中执行 gulp, 就可以启动 web 服务器，然后可以在浏览器中打开 localhost:8080
gulp localhost-live
给 connect.server() 方法传入一个参数
gulp.task(‘localhost-live’, function() {
connect.server({
livereload: true
});
});
SASS 编译
gulp sass
打开终端进入到 gulpfile.js 所在的 theme 目录。输入 gulp sass 命令执行手工构建任务。
发现报错
It’s not clear which file to import for ‘@import “file”‘.
由于 sass _filename.scss 不允许出现 同名无下划线 filename.scss , 写文件全称试试解决：components-md.scss 中
@import ‘_components.scss’;
继续执行 gulp sass, 发现报错
Message:
sass\global\_components.scss
Error: Import directives may not be used within control directives or mixins.
on line 7 of sass/global/_components.scss
from line 8 of sass/global/components-md.scss
解决：_components.scss 中
// General CSS Reset
@if $theme-style == “square” {
@import ‘components/_reset-rounds’;
}
去掉 @if 判断
继续执行 gulp sass , 出现新的报错
Error: Undefined variable: “$general-border-radius”.
on line 134 of sass/apps/inbox.scss
border-radius: $general-border-radius;
解决：global/_variables.scss 中
@if $theme-type == “material-design” {
$general-border-radius: 2px !default;
} @else {
$general-border-radius: 4px !default;
}
在 @if 前添加
$general-border-radius: 2px !default;
继续执行 gulp sass , 出现新的报错
The following tasks did not complete: testGulp
Did you forget to signal async completion?
官方方法：在不使用文件流的情况下，向 task 的函数里传入一个名叫 done 的回调函数，以结束 task。参考
gulp.task(‘testGulp’, done => {
console.log(‘Hello World!’);
done();
});
gulp sass:watch
输入 gulp sass:watch 运行 scss 实时监控 css 文件的编译，编译后的 css 文件会输出到 assets 目录。
Error: watching ./sass/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
at Gulp.watch (F:\web\metronic_v4.5.2\theme\node_modules\gulp\index.js:28:11)
at F:\web\metronic_v4.5.2\theme\gulpfile.js:59:10
at taskWrapper (F:\web\metronic_v4.5.2\theme\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (F:\web\metronic_v4.5.2\theme\node_modules\async-done\index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
分析：这个是由于 require 引入的包的版本问题导致的。在不同的版本里，接口参数发生了变化。在 gulp4.0 之后已经只能接受 watch 第二个参数必须为函数。
解决办法：修改 gulpfile.js
gulp.task(‘sass:watch’, function () {
gulp.watch(‘./sass/**/*.scss’,gulp.series(‘sass’));
});
RTL SASS 编译
因为 RTL 的主题文件和默认的主题文件不在同一个目录，一个在 theme_rtl，一个在 theme，所以，在 theme_rtl 目录下，需要对 gulp 进行重新部署。
然后进入 gulpfile.js 位于的 theme_rtl 目录。确定最新修改的 SCSS 已通过 gulp sass 或 gulp sass:watch 命令编译。运行 gulp rtlcss 命令执行 css 文件的 RTL 版本修改任务。编译后的 RTL css 会被输出到 assets 目录.
CSS 和 JS 文件的压缩
在命令行下进入 theme 目录。运行 gulp minify 执行 css 和 js 文件压缩任务. 压缩后的文件会输出到 html 目录.
HTML 格式化
gulp prettify 该命令可以将 HTML 格式化缩进，对于 pre 和 code 两个标签内的内容不进行格式化。
