Semantic-ui: Running 'gulp build', but no output directory is created.

[nicktc]

Hi,

I am running 'gulp build' inside the semantic folder, but no output directory is created.

$ gulp build
[15:38:09] Using gulpfile ~/XX/XX/semantic/gulpfile.js
[15:38:09] Starting 'build'...
Building Semantic
[15:38:09] Starting 'build-javascript'...
Building Javascript
[15:38:09] Starting 'build-css'...
Building CSS
[15:38:09] Starting 'build-assets'...
Building assets
[15:38:09] Starting 'package compressed js'...
[15:38:09] Starting 'package uncompressed js'...
[15:38:09] Finished 'build-javascript' after 78 ms
[15:38:09] Starting 'package uncompressed css'...
[15:38:09] Starting 'package compressed css'...
[15:38:09] Finished 'build-assets' after 51 ms
[15:38:09] Finished 'package uncompressed js' after 24 ms
[15:38:09] Finished 'package uncompressed css' after 17 ms
[15:38:09] Finished 'package compressed js' after 34 ms
[15:38:09] Finished 'package compressed css' after 10 ms
[15:38:09] Finished 'build-css' after 72 ms
[15:38:09] Finished 'build' after 99 ms

Build Javascript and Build CSS appear in blue text.

Versions:

Semantic --> 2.2.6
NPM --> 3.10.8
Gulp --> 3.9.1
Node --> v6.9.1

[vixandrade]

Hi, I've been struggling with this 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!

I've found some other threads with this same issue, so I believe it would be worth a look at the Semantic UI installation script. Other issues are: #4565 #4481 #4326 , and I'm tagging @jlukic because he was the one to close some of those due to lack of information.

[vinayakkulkarni]

I'm using elixir for compiling assets; below is my gulpfile.

Run : gulp semantic-build-ui && gulp to get semantic-ui files in /public/css/ and /public/js/ directories

const elixir    = require('laravel-elixir');
var gulp    = require('gulp');

var semantic = {
  watch: require('./node_modules/semantic-ui/tasks/watch'),
  build: require('./node_modules/semantic-ui/tasks/build')
};

gulp.task('semantic-move-config', function() {
   gulp.src('./resources/assets/semantic/config/site.variables').pipe(gulp.dest('./node_modules/semantic-ui/src/site/globals'));
   gulp.src('./resources/assets/semantic/config/icon.variables').pipe(gulp.dest('./node_modules/semantic-ui/src/site/elements'));
   gulp.src('./resources/assets/semantic/config/flag.variables').pipe(gulp.dest('./node_modules/semantic-ui/src/site/elements'));
});

gulp.task('semantic-build', ['semantic-move-config'], semantic.build);

gulp.task('semantic-build-ui', ['semantic-build'], function() {
    gulp.src('./node_modules/semantic-ui/dist/semantic.min.css').pipe(gulp.dest('./resources/assets/css'));
    gulp.src('./node_modules/jquery/dist/jquery.min.js').pipe(gulp.dest('./resources/assets/js'));
    gulp.src('./node_modules/semantic-ui/dist/semantic.min.js').pipe(gulp.dest('./resources/assets/js'));
    gulp.src(['./node_modules/semantic-ui/dist/themes/default/assets/fonts/**/*']).pipe(gulp.dest('./resources/assets/fonts'));
    gulp.src(['./node_modules/semantic-ui/dist/themes/default/assets/images/**/*']).pipe(gulp.dest('./resources/assets/images'));
});

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix
        .stylesIn('resources/assets/css', 'public/assets/css/application.css')
        .scripts(['jquery.min.js', 'semantic.min.js'], 'public/assets/js/application.js')
        .version(['assets/css/application.css', 'assets/js/application.js'])
        .copy('resources/assets/fonts', 'public/assets/fonts')
        .copy('resources/assets/images', 'public/assets/images');
});

[awgv]

Hi @nicktc, can this be closed as resolved?

[LorenzoFernando]

The solution given by vixandrade works for me as well. I will look into this myself, but is there a way to ensure that semantic.json is placed in the correct directory moving forward?

[vinayakkulkarni]

Closing this till @nicktc replies.

[congzhaoyang]

@vixandrade nice,i solved the problem through your answer，thanks。

[cyclingengineer]

@vixandrade - I also used this solution. @nicktc it's all a bit confusing as to why semantic.json is put by default outside the semantic folder - maybe this should be reopened?

[umucorn]

I did move semantic.json to /semantic directory (the dir that contains /src and /tasks). And ran gulp watch. There is no difference I see. /dist is not created.

Edit: ok, I ran gulp build and it got built. Thanks. After learning theming, I'll consider on problems again.