为语义 ui 构建 gulp 非常慢

Question

我已经在这方面搜索了好几天，但运气不佳。我通过 NPM 安装了语义 UI，并安装了 Laravel。我在项目的根目录中修改了我的 gulpfile.js 以导入语义 UI 的构建和监视任务：

var elixir = require('laravel-elixir');
var gulp = require('gulp');
var watch = require('./resources/assets/semantic/tasks/watch');
var build = require('./resources/assets/semantic/tasks/build');


// import task with a custom task name
gulp.task('watch-ui', 'Watch UI for Semantic UI', watch);
gulp.task('build-ui', 'Build UI for Semantic UI', build);

elixir(function(mix) {
    //mix.less('app.less');
    mix.browserify('main.js');

    // Start New
     mix
         .copy('resources/assets/semantic/dist/semantic.js', 'public/js/semantic.js')
         .copy('resources/assets/semantic/dist/semantic.css', 'public/css/semantic.css')
     ;
    // End New
});

这可行，但过程非常缓慢：

[17:51:30] Starting 'package compressed css'...
[17:51:56] Created: resources/assets/semantic/dist/semantic.min.css
[17:51:56] Finished 'package compressed css' after 25 s
[17:51:56] Created: resources/assets/semantic/dist/semantic.css
[17:51:56] Finished 'package uncompressed css' after 26 s
[17:51:56] Finished 'build-css' after 3.45 min

对加快这个过程有什么建议吗？

这是我的语义.json，以备不时之需：

{
  "base": "resources/assets/semantic",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "dist/",
      "uncompressed": "dist/components/",
      "compressed": "dist/components/",
      "themes": "dist/themes/"
    },
    "clean": "dist/"
  },
  "permission": false,
  "rtl": "No",
  "components": [
    "reset",
    "site",
    "button",
    "container",
    "divider",
    "flag",
    "header",
    "icon",
    "image",
    "input",
    "label",
    "list",
    "loader",
    "rail",
    "reveal",
    "segment",
    "step",
    "breadcrumb",
    "form",
    "grid",
    "menu",
    "message",
    "table",
    "ad",
    "card",
    "comment",
    "feed",
    "item",
    "statistic",
    "accordion",
    "checkbox",
    "dimmer",
    "dropdown",
    "embed",
    "modal",
    "nag",
    "popup",
    "progress",
    "rating",
    "search",
    "shape",
    "sidebar",
    "sticky",
    "tab",
    "transition",
    "api",
    "form",
    "state",
    "visibility"
  ],
  "version": "2.1.8"
}

Answer 1

您可以将/resources/assets/semantic/tasks/watch.js复制到/resources/assets/semantic/tasks/watch-dev.js并删除所有与压缩css相关的代码，只留下未压缩的任务。 然后你更新你的 elixir/gulp 文件：

var watchSemantic = require('./resources/assets/semantic/tasks/watch-dev');
require('./resources/assets/semantic/tasks/build');
elixir.extend('watchSemantic',watchSemantic);

elixir(function(mix) {

    mix.watchSemantic();

    /* ... */
});

如果您需要缩小文件，用于生产，请执行相反的操作，保留压缩代码并删除未压缩的代码。

这使我的语义 UI 构建和观看速度快了近 50%，而且我加载任务的方式与 Elixir gulp watch 一起工作，所以在构建语义.css 后，重新加载其他 Elixir 任务。

关于 3:45 分钟的构建时间，似乎不是 Elixir 的问题，甚至 gulp，似乎与硬件有关。您可以通过构建一个全新的 semantic-ui 独立安装来测试它，它不会超过 20 秒。作为参考，我的构建在 4 秒内。