gulp build 用于语义 ui 非常慢

Question

我已经为此搜索了好几天，但运气不佳。我通过 NPM 安装了语义 UI，并安装了 Laravel。我修改了项目根目录中的 gulpfile.js 以导入 build 并观察语义任务 -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

有什么加速这个过程的建议吗？

这是我的 semantic.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 build 和观看速度快了近 50%，而且，我加载任务的方式与 Elixir gulp watch 兼容，所以在semantic.css 是 built，其他 Elixir 任务重新加载。

关于3:45分钟uild的时间，似乎不是Elixir的问题，甚至gulp，似乎是硬件的问题。您可以通过 uilding 一个新的 semantic-ui 独立安装来测试它，它应该不会超过 20 秒。作为参考，我的 builds in 4s.

gulp build 用于语义 ui 非常慢

gulp build for semantic ui very slow

laravel

semantic-ui

gulp