Gulp, Laravel 5.3 and Semantic-UI - laravel

Question

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
gulp build for semantic ui very slow
^^ 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

Answer 1

I'm not sure if this is the same scenario, but...
I've been struggling with a similar issue for a while, but I've finally come up with a solution.
By digging through the task scripts on /semantic/tasks I've discovered that the gulp tasks expected the semantic.json file to be on the root of the semantic folder and not on root of the project directory - where it was created by default in my case.
I just moved the semantic.json from the project root to the semantic folder and ran 'gulp build' again. Now I have the /dist folder as expected!

Answer 2

maybe i can help you with this, I'm current work with semantic and L5.3 I installed semantic on my resources/assets/less folder in the same folder I create a app.less and import the semantic file,
& {#import "src/semantic";}
after tha ti can make all with elixir in common way
mix.less('app.less')
and all work normally with the css, for the js you can use a cdn or build de js with the semantic comamd.