Metronic学习之路(一)

使用GULP构建工具对Metronic进行管理

部署gulp

  1. 打开终端并进入到 Metronic 的 theme 根目录,运行以下代码

    $ npm install //安装程序的依赖包

    发现 npm installnode-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 就解决了

  2. 全局安装gulp

    $ npm install gulp -g
  3. 测试 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 列出的其他任务。

  4. 如果有其他问题,请参考
    [转]初探前端自动化神器(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 命令执行手工构建任务。

  1. 发现报错

    It's not clear which file to import for '@import "file"'.

    由于 sass _filename.scss 不允许出现 同名无下划线 filename.scss ,写文件全称试试
    解决:components-md.scss

    @import '_components.scss';
  2. 继续执行 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 判断

  3. 继续执行 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;
  4. 继续执行 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

  1. 输入 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 两个标签内的内容不进行格式化。

相关推荐