Gulp，Laravel 5.3和Semantic-UI

Question

Gulp这里的菜鸟

所以，我试图在我的Laravel5.3项目中实现语义用户界面(Semantic)，我陷入了这样的境地:我尝试了很多东西，但都没有成功。

我遵循的步骤是：

composer create-project --prefer-dist laravel/laravel laravel-angular
npm install // to install browserify, elixir, etc.

package.json for npm安装

    {
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "lodash": "^4.14.0"
  }
}

然后我安装了语义-ui：

npm install semantic-ui

npm install semantic-ui的输出

MacBook-Pro:laravel-angular vinayak$ npm install semantic-ui
npm WARN excluding symbolic link tests/withsymlinks/.hidden -> ../shown/.hidden
npm WARN excluding symbolic link tests/withsymlinks/bar.txt -> ../shown/bar.txt
npm WARN excluding symbolic link tests/withsymlinks/.hidden -> ../shown/.hidden
npm WARN excluding symbolic link tests/withsymlinks/bar.txt -> ../shown/bar.txt
npm WARN prefer global js-beautify@1.5.10 should be installed with -g

> semantic-ui@2.2.4 install /Applications/MAMP/htdocs/laravel-angular/node_modules/semantic-ui
> gulp install

[17:51:54] Using gulpfile /Applications/MAMP/htdocs/laravel-angular/node_modules/semantic-ui/gulpfile.js
[17:51:54] Starting 'install'...
[17:51:54] Starting 'run setup'...
? Set-up Semantic UI Custom (Customize all src/dist values)
?
    We detected you are using NPM. Nice!

    Is this your project folder?
    /Applications/MAMP/htdocs/laravel-angular


 No, let me specify
? Please enter the absolute path to your project root (/Applications/MAMP/htdocs/laravel-angular)
? Please enter the absolute path to your project root /Applications/MAMP/htdocs/laravel-angular/resources/assets/
? Should we set permissions on outputted files? No
? Do you use a RTL (Right-To-Left) language? No
? Where should we put your site folder? src/site
? Where should we output a packaged version? dist
? Where should we output compressed components? dist/components
? Where should we output uncompressed components? dist/components
[17:57:08] Finished 'run setup' after 5.22 min
[17:57:08] Starting 'create install files'...
Installing
------------------------------
Installing to semantic/
Copying UI definitions
Copying UI themes
Copying gulp tasks
Adding theme files
Creating gulpfile.js
Creating site theme folder /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic/src/site
[17:57:08] Starting 'create theme.config'...
Adjusting @siteFolder to:  site/
Creating src/theme.config (LESS config) /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic/src/theme.config
[17:57:08] Finished 'create theme.config' after 24 ms
[17:57:08] Starting 'create semantic.json'...
Creating config file (semantic.json) /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic.json
[17:57:08] Finished 'create semantic.json' after 30 ms
[17:57:08] Finished 'create install files' after 343 ms
[17:57:08] Starting 'clean up install'...

 Setup Complete!
 Installing Peer Dependencies. Please refrain from ctrl + c...
 After completion navigate to semantic/ and run "gulp build" to build
/Applications/MAMP/htdocs/laravel-angular
└─┬ semantic-ui@2.2.4
  ├─┬ better-console@0.2.4
  │ ├─┬ cli-table@0.2.0
  │ │ └── colors@0.3.0
  │ └── colors@0.6.2
  ├─┬ gulp-chmod@1.3.0
  │ ├─┬ deep-assign@1.0.0
  │ │ └── is-obj@1.0.1
  │ └── stat-mode@0.2.2
  ├─┬ gulp-clean-css@2.0.12
  │ ├── object-assign@4.1.0
  │ ├─┬ readable-stream@2.1.5
  │ │ └── isarray@1.0.0
  │ └─┬ vinyl-bufferstream@1.0.1
  │   └── bufferstreams@1.0.1
  ├─┬ gulp-clone@1.0.0
  │ ├─┬ gulp-util@2.2.20
  │ │ ├─┬ chalk@0.5.1
  │ │ │ ├── ansi-styles@1.1.0
  │ │ │ ├─┬ has-ansi@0.1.0
  │ │ │ │ └── ansi-regex@0.2.1
  │ │ │ ├── strip-ansi@0.3.0
  │ │ │ └── supports-color@0.2.0
  │ │ ├── lodash._reinterpolate@2.4.1
  │ │ ├─┬ lodash.template@2.4.1
  │ │ │ ├── lodash._escapestringchar@2.4.1
  │ │ │ ├─┬ lodash.escape@2.4.1
  │ │ │ │ ├─┬ lodash._escapehtmlchar@2.4.1
  │ │ │ │ │ └── lodash._htmlescapes@2.4.1
  │ │ │ │ └─┬ lodash._reunescapedhtml@2.4.1
  │ │ │ │   └── lodash.keys@2.4.1
  │ │ │ ├── lodash.keys@2.4.1
  │ │ │ ├── lodash.templatesettings@2.4.1
  │ │ │ └─┬ lodash.values@2.4.1
  │ │ │   └── lodash.keys@2.4.1
  │ │ ├── minimist@0.2.0
  │ │ ├─┬ through2@0.5.1
  │ │ │ └── xtend@3.0.0
  │ │ └── vinyl@0.2.3
  │ └─┬ through2@0.4.2
  │   ├── readable-stream@1.0.34
  │   └── xtend@2.1.2
  ├─┬ gulp-concat-css@2.3.0
  │ ├─┬ lodash.defaults@3.1.2
  │ │ └─┬ lodash.assign@3.2.0
  │ │   └── lodash._createassigner@3.1.1
  │ ├─┬ parse-import@2.0.0
  │ │ └─┬ get-imports@1.0.0
  │ │   └── import-regex@1.1.0
  │ ├─┬ rework@1.0.1
  │ │ ├── convert-source-map@0.3.5
  │ │ └─┬ css@2.2.1
  │ │   ├── source-map@0.1.43
  │ │   ├─┬ source-map-resolve@0.3.1
  │ │   │ ├── atob@1.1.3
  │ │   │ ├── resolve-url@0.2.1
  │ │   │ └── source-map-url@0.3.0
  │ │   └── urix@0.1.0
  │ ├─┬ rework-import@2.1.0
  │ │ ├─┬ globby@2.1.0
  │ │ │ ├── async@1.5.2
  │ │ │ └── glob@5.0.15
  │ │ └─┬ url-regex@3.2.0
  │ │   └── ip-regex@1.0.3
  │ ├─┬ rework-plugin-url@1.1.0
  │ │ └─┬ rework-plugin-function@1.0.2
  │ │   └── rework-visit@1.0.0
  │ └── through2@1.1.1
  ├─┬ gulp-copy@0.0.2
  │ ├─┬ gulp-util@2.2.20
  │ │ ├─┬ chalk@0.5.1
  │ │ │ ├── ansi-styles@1.1.0
  │ │ │ ├─┬ has-ansi@0.1.0
  │ │ │ │ └── ansi-regex@0.2.1
  │ │ │ ├── strip-ansi@0.3.0
  │ │ │ └── supports-color@0.2.0
  │ │ ├── lodash._reinterpolate@2.4.1
  │ │ ├─┬ lodash.template@2.4.1
  │ │ │ ├── lodash.escape@2.4.1
  │ │ │ ├── lodash.keys@2.4.1
  │ │ │ └── lodash.templatesettings@2.4.1
  │ │ ├── minimist@0.2.0
  │ │ ├─┬ through2@0.5.1
  │ │ │ ├── readable-stream@1.0.34
  │ │ │ └── xtend@3.0.0
  │ │ └── vinyl@0.2.3
  │ └── through@2.3.4
  ├─┬ gulp-dedupe@0.0.2
  │ ├── diff@1.0.8
  │ └─┬ lodash.defaults@2.4.1
  │   ├── lodash._objecttypes@2.4.1
  │   └─┬ lodash.keys@2.4.1
  │     ├── lodash._isnative@2.4.1
  │     ├── lodash._shimkeys@2.4.1
  │     └── lodash.isobject@2.4.1
  ├── gulp-flatten@0.2.0
  ├── gulp-header@1.8.8
  ├── gulp-help@1.6.1
  ├─┬ gulp-json-editor@2.2.1
  │ ├── deepmerge@0.2.10
  │ ├─┬ detect-indent@2.0.0
  │ │ ├── get-stdin@3.0.2
  │ │ └── repeating@1.1.3
  │ ├─┬ js-beautify@1.5.10
  │ │ └─┬ config-chain@1.1.10
  │ │   └── proto-list@1.2.4
  │ └─┬ through2@0.5.1
  │   ├── readable-stream@1.0.34
  │   └── xtend@3.0.0
  ├── gulp-plumber@1.1.0
  ├─┬ gulp-print@2.0.1
  │ └── map-stream@0.0.6
  ├─┬ gulp-prompt@0.2.0
  │ ├─┬ event-stream@3.0.20
  │ │ ├── duplexer@0.1.1
  │ │ ├── from@0.1.3
  │ │ ├── map-stream@0.0.6
  │ │ ├── pause-stream@0.0.11
  │ │ ├── split@0.2.10
  │ │ └── stream-combiner@0.0.4
  │ └─┬ inquirer@0.10.1
  │   ├── ansi-escapes@1.4.0
  │   ├─┬ cli-cursor@1.0.2
  │   │ └─┬ restore-cursor@1.0.1
  │   │   ├── exit-hook@1.1.1
  │   │   └── onetime@1.1.0
  │   ├── cli-width@1.1.1
  │   ├─┬ figures@1.7.0
  │   │ └── object-assign@4.1.0
  │   ├── lodash@3.10.1
  │   ├─┬ readline2@1.0.1
  │   │ └── mute-stream@0.0.5
  │   ├── run-async@0.1.0
  │   └── rx-lite@3.1.2
  ├─┬ gulp-replace@0.5.4
  │ ├─┬ istextorbinary@1.0.2
  │ │ ├── binaryextensions@1.0.1
  │ │ └── textextensions@1.0.2
  │ ├─┬ readable-stream@2.1.5
  │ │ └── isarray@1.0.0
  │ └─┬ replacestream@4.0.2
  │   ├── object-assign@4.1.0
  │   └─┬ readable-stream@2.1.5
  │     └── isarray@1.0.0
  ├─┬ gulp-rtlcss@1.0.0
  │ ├─┬ rtlcss@2.0.6
  │ │ ├─┬ findup@0.1.5
  │ │ │ ├── colors@0.6.2
  │ │ │ └── commander@2.1.0
  │ │ └── strip-json-comments@2.0.1
  │ └─┬ through2@0.6.5
  │   └── readable-stream@1.0.34
  ├─┬ gulp-watch@4.3.9
  │ ├── object-assign@4.1.0
  │ └─┬ readable-stream@2.1.5
  │   └── isarray@1.0.0
  ├── map-stream@0.1.0
  ├── require-dot-file@0.4.0
  ├── wrench@1.5.8
  └─┬ yamljs@0.2.8
    ├─┬ argparse@1.0.7
    │ └── sprintf-js@1.0.3
    └─┬ glob@7.0.6
      └── minimatch@3.0.3

然后，我做了gulp build ，根据信息

[17:58:25] Using gulpfile /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic/gulpfile.js
[17:58:25] Starting 'build'...
Building Semantic
[17:58:25] Starting 'build-javascript'...
Building Javascript
[17:58:25] Starting 'build-css'...
Building CSS
[17:58:25] Starting 'build-assets'...
Building assets
[17:58:25] Starting 'package compressed js'...
[17:58:25] Starting 'package uncompressed js'...
[17:58:25] Finished 'build-javascript' after 93 ms
[17:58:25] Starting 'package uncompressed css'...
[17:58:25] Starting 'package compressed css'...
[17:58:25] Finished 'build-assets' after 66 ms
[17:58:25] Finished 'package uncompressed js' after 35 ms
[17:58:25] Finished 'package uncompressed css' after 25 ms
[17:58:25] Finished 'package compressed js' after 50 ms
[17:58:25] Finished 'package compressed css' after 13 ms
[17:58:25] Finished 'build-css' after 89 ms
[17:58:25] Finished 'build' after 124 ms

稍后..。在搜索interwebz之后

gulp build for semantic ui very slow

^^找到了这个宝石，也找到了一些文档( http://semantic-ui.com/introduction/advanced-usage.html )

根目录gulpfile.js中的My

const 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(mix => {
    mix.browserify('app.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
    mix.version(['public/js/semantic.js', 'public/css/semantic.css']);
});

在gulp build-ui之后，输出与上面的gulp build完全相同，在gulp build目录中没有dist/文件夹

使用上述链接中提供的gulpfile代码，并开始监视gulp watch-ui的更改，但当我在assets/semantic/src/theme.config文件中更改配置时，不会发生任何变化。

PS。semantic.json文件在resources/assets/semantic文件夹中：

{
  "base": "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,
  "autoInstall": false,
  "rtl": false,
  "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.2.4"
}

国家预防机制版本: 3.10.3

节点版本: 6.5.0

语义UI : 2.2.4

Laravel : 5.3.9

Answer 1

我不确定这是不是同样的情况，但是.

我已经为一个类似的问题挣扎了一段时间，但我终于想出了一个解决方案。

通过在/semantic/tasks上挖掘任务脚本，我发现gulp任务期望semantic.json文件位于语义文件夹的根目录上，而不是在项目目录的根目录上--在我的示例中，它是默认创建的。

我刚刚将semantic.json从项目根目录移到语义文件夹，然后再次运行'gulp‘。现在我有了/dist文件夹，就像预期的那样！

Answer 2

也许我可以帮你解决这个问题，我正在做语义方面的工作，L5.3我在我的资源/资产/ the文件夹上安装了语义，我创建了一个app.less并导入了语义文件，

& {@import "src/semantic";}

之后，tha可以用普通的方法用长生不老药来制作。

mix.less('app.less')

所有这些都与css一起正常工作，对于js，您可以使用cdn或使用语义comamd构建de。