Repository: Semantic-Org/Semantic-UI

Issue #4352: I followed the install guide and the dist folder is not getting created on running gulp build
Created: 2016-07-28T12:32:00Z

Duplicate issue #4565: Laravel 5.3 / Gulp and dist folder
Created: 2016-09-19T14:35:59Z
Gulp newbie here
So, I was trying to implement semantic-ui in my laravel 5.3 project and I'm stuck at a point where I've tried a lot of things but nothing works.
Steps I followed:
composer create-project --prefer-dist laravel/laravel laravel-angular
npm install // to install browserify, elixir, etc.

package.json for npm install
{
  "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"
  }
}

Then I installed semantic-ui:
npm install semantic-ui

Output of 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

Then I did gulp build as per the info
[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

Later on.. after searching the interwebz
http://stackoverflow.com/questions/36363580/gulp-build-for-semantic-ui-very-slow/36510399
^^ Found this gem, also found some documentation ( http://semantic-ui.com/introduction/advanced-usage.html )
My gulpfile.js in root directory
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']);
});

After gulp build-ui, the output is exactly same as gulp build above, there's no dist/ folder in my resources/assets/semantic directory
Used the gulpfile code provided in the above links and started watching for changes by gulp watch-ui but nothing happens when i change config in assets/semantic/src/theme.config file.
PS. semantic.json file in resources/assets/semantic folder:
{
  "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"
}

NPM version : 3.10.3 
Node version : 6.5.0
Semantic UI : 2.2.4
Laravel : 5.3.9

Closing comment (2016-09-19T15:02:45Z): @sstok, it's already on stackoverflow, the issue is quite similar to #4352. and majorly involving gulp.
PS. it's on stackoverflow