用于语义用户界面的gulp构建非常慢

Question

我在这上面找了好几天没什么运气了。我已经通过NPM安装了Semantic和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

对加快这一进程有什么建议吗？

这是我的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相关的所有代码，只留下unCompressed任务。然后更新您的灵丹妙药/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();

    /* ... */
});

如果您需要缩小的文件，生产，做反向，留下压缩的代码和删除unCompressed。

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

关于3:45分钟的构建时间，似乎不是灵丹妙药的问题，甚至是吞食，它似乎与硬件有关。您可以通过构建一个新的语义-ui独立安装来测试它，它应该不会超过20秒。供参考，我的建筑4s。