Metronic學習之路(一)

時間 2019-12-10

標籤 metronic 學習之路简体版

原文原文鏈接

使用GULP構建工具對Metronic進行管理css

部署gulp

打開終端並進入到 Metronic 的 theme 根目錄，運行如下代碼html
```
$ 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 就解決了前端
全局安裝gulpnode
```
$ npm install gulp -g
```
測試 gulp，在終端輸入 gulp
報錯 Cannot find module 'gulp-prettify' 模塊找不到
進入 npm 搜索包名並安裝web
```
$ npm i gulp-prettify
```
再次執行 gulp 命令,出現錯誤npm
```
$ 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
若是有其餘問題，請參考
[轉]初探前端自動化神器（Gulp）
[轉]Bootstrap 之 Metronic 模板的學習之路 - （7）GULP 前端自動化工具

gulp 任務運用

gulp localhost

安裝 Connect 插件segmentfault
```
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() 方法傳入一個參數sass

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 目錄.