为语义ui构建吞吐非常缓慢 [英] gulp build for semantic ui very slow

问题描述

我一直在这里寻找几天，但没有多少运气。我通过NPM安装了Laravel安装语义UI。我已经在我的项目的根目录中修改了我的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'）; 
 
 
 //使用自定义任务名称导入任务
 gulp.task（'watch-ui'，'Watch UI for Semantic UI'，watch）; 
 gulp.task（'build-ui'，'Build UI for Semantic UI'，build）; 
 
 elixir（函数（混合）{
 //mix.less('app.less'）; 
 mix.browserify（'main.js'）; 
 
 //开始新
混合
 .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]正在启动'package compressed css'... 
 [17:51:56] Created：resources / assets / semantic / dist / semantic.min.css 
 [17:51:56] 25秒后完成'package compressed css'
 [17:51:56] Created：resources / assets / semantic / dist / semantic.css 
 [17:51:56] 26秒后完成'package uncompressed css'
 [17:51:56] 3.45分钟完成'build-css'
  

有关加速此流程的建议吗？

这里是我的semantic.json，以防需要：

  {
base：resources / assets / semantic，
paths： {
source：{
config：src / theme.config，
definitions：src / definitions /，
site： src / site /，
themes：src / themes /
}，
输出：{
packaged：dist /，
未压缩：dist / components /，
compressed：dist / components /，
themes：dist / themes /
}，
clean：dist /
，
权限：false，
rtl：否，
components：[
reset，
site，
button，
container，
divider，
flag，
header，
图标，
图片，
输入，
标签，
列表，
加载器，
导轨 ，
显示，
segment，
step，
breadcrumb，
form，
grid，
菜单，
消息，
表，
广告，
卡，
评论，
feed，
item，
statistic，
accordion，
复选框，
调光器，
下拉，
嵌入，
模态，
唠叨，
弹出，
进度，
 ，
搜索，
形状，
边栏，
sticky，
tab，
transition，
api，
form，
state，
可见性
，
version：2.1.8
} 
  

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

$ p $ var watchSemantic = require（'./ resources / assets / semantic /任务/表-dev的'）;
require（'./ resources / assets / semantic / tasks / build'）;
elixir.extend（'watchSemantic'，watchSemantic）;

elixir（函数（混合）{

mix.watchSemantic（）;

/ * ... * /
}） ;


如果您需要缩小文件，请执行反转操作，保留压缩的代码并删除uncompressed。 / p>

这使得我的语义UI构建和观察快了近50％，同样，我加载任务的方式与Elixir gulp watch ，所以在semantic.css被创建之后，其他Elixir任务被重新加载。

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

I've been searching around for days on this without much luck. I have Semantic UI installed via NPM with a Laravel install. I've modified my gulpfile.js in the root of my project to import the build and watch tasks for semantic-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
});

This works, but the process is painfully slow:

[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

Any suggestions for speeding up this process?

Here's my semantic.json in case it's needed:

{
  "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"
}

解决方案

You can make a copy of /resources/assets/semantic/tasks/watch.jsto /resources/assets/semantic/tasks/watch-dev.js and remove all code related to compressed css, leaving only unCompressed tasks. Then you update your elixir/gulp file:

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

elixir(function(mix) {

    mix.watchSemantic();

    /* ... */
});

If you need minified files, for production, do the inverse, leave compressed code and remove unCompressed.

This made my semantic-ui build and watch almost 50% faster, also, the way I'm loading the task works with Elixir gulp watch, so after the semantic.css is built, other Elixir tasks are reloaded.

Regarding to the 3:45 min build time, does not seem a problem of Elixir, or even gulp, it seems something related to hardware. You can test it by building a fresh semantic-ui standalone install, it shouldn't take more than 20 seconds. For reference, mine builds in 4s.

这篇关于为语义ui构建吞吐非常缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！