Task perfomed but no result

[advokatb]

Hi. I have an WordPress theme with src folderd inside with mytheme\src\gulpfile.js inside it.

var gulp = require("gulp"),
    sass = require('gulp-sass'),
    combineMq = require('gulp-combine-mq'),
    clean = require('gulp-clean'),
    errorNotifier = require('gulp-error-notifier'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS = require('gulp-clean-css'),
    uglify = require('gulp-uglify'),
    rigger = require('gulp-rigger'),
    gulpMerge = require('gulp-merge'),
    concat = require('gulp-concat');

var path = {
    build: {
        js: '../js/',
        css: '../css/',
    },

    src: {
        scripts: {
            libs: 'scripts/libs.js',
            scripts: 'scripts/scripts.js'
        },
        styles: {
            fonts: 'styles/fonts.css',
            libs: 'styles/libs.css',
            main: 'styles/main.scss',
            inline: 'styles/inline.scss'
        },
    },

    watch: {
        js: ['scripts/*.js', 'blocks/**/*.js'],
        scss: 'blocks/**/*.scss',
        styles: ['styles/*.scss', 'styles/*.css']
    }

};

gulp.task('watch', function () {
    gulp.watch([path.watch.styles, path.watch.scss], ['inline-styles:build','main-styles:build']);
    gulp.watch([path.watch.js], ['main-scripts:build']);
});

gulp.task('inline-styles:build', function () {
    return gulpMerge(
        gulpMerge(

            gulp.src(path.src.styles.inline)
                .pipe(errorNotifier())
                .pipe(rigger())
                .pipe(sass())
                .pipe(autoprefixer({
                    browsers: ['last 5 versions'],
                    cascade: false
                }))
            .pipe(combineMq())

//       we include fonts directly on page              
//            ,
//            gulp.src(path.src.styles.fonts)
            .pipe(errorNotifier())

        )
        .pipe(concat('inline.css'))
        //.pipe(cleanCSS())
    )
    .pipe(gulp.dest(path.build.css));
});    

gulp.task('main-styles:build', function () {
    return gulpMerge(
        gulpMerge(
            gulp.src(path.src.styles.libs)
                .pipe(errorNotifier())
                .pipe(rigger()), 

            gulp.src(path.src.styles.main)
                .pipe(errorNotifier())
                .pipe(rigger())
                .pipe(sass())
                .pipe(autoprefixer({
                    browsers: ['last 5 versions'],
                    cascade: false
                }))
            .pipe(combineMq())
        )
        .pipe(concat('styles.css'))
        //.pipe(cleanCSS())
    )
    .pipe(gulp.dest(path.build.css));
});

gulp.task('libs-scripts:build', function () {
    return gulp.src(path.src.scripts.libs)
        .pipe(errorNotifier())
        .pipe(rigger())
        .pipe(concat('libs.js'))
    // .pipe(uglify())
    .pipe(gulp.dest(path.build.js));
});

gulp.task('main-scripts:build', function () {
    return gulp.src(path.src.scripts.scripts)
        .pipe(errorNotifier())
        .pipe(rigger())
        .pipe(concat('scripts.js'))
    // .pipe(uglify())
    .pipe(gulp.dest(path.build.js));
});

gulp.task('build', ['inline-styles:build', 'main-styles:build', 'libs-scripts:build', 'main-scripts:build']);

gulp.task('default', ['build']);

I've changed config "gulptasks.pattern": "**/src/gulpfile.js" for finding this file.

But when I press Watch or Build the log says that build is completed

> build: STARTED
> build: Using gulpfile \mytheme\uberdeal\src\gulpfile.js
> build: Starting 'inline-styles:build'...
> build: Starting 'main-styles:build'...
> build: Starting 'libs-scripts:build'...
> build: Starting 'main-scripts:build'...
> build: Finished 'inline-styles:build' after 256 ms
> build: Finished 'main-styles:build' after 88 ms
> build: Finished 'libs-scripts:build' after 85 ms
> build: Finished 'main-scripts:build' after 84 ms
> build: Starting 'build'...
> build: Finished 'build' after 93 μs
> build: COMPLETED

but neither scripts nor styles are not updated in their files (inline.css + styles.css) What am I doing wrong? Thanks.

[nickdodd79]

Hi @advokatb

Everything looks like it should from the extracts you have posted. If you run gulp build in the terminal window do you get the same result? And do the individual tasks run as expected when invoke on their own?

On thought is that the paths in your path variable are pointing to the wrong locations so the tasks are not resolving any streams.

Hope that helps. Nick.

[advokatb]

When I run gulp build in terminal everythig works as expected. This command creates/updates my inline.css + styles.css. When I run tasks from extension nothing happens except log (it says that everything is fine). I'm new to gulp and can't figure out what should I do to solve this :(

[nickdodd79]

OK, I'll do some testing to see if I can replicate the issue,

[nickdodd79]

Can you provide some more info about the structure of your project. The various files you want to consume from the path variable, are they within the /mytheme/uberdeal/src path or in folders on the project root (i.e. /scripts/libs.js or /mytheme/uberdeal/src/scripts/libs.js)?

For the purpose of running tasks in a multi project workspace, we set the cwd value for the gulp process to the location where the gulpfile can be found. In your case this would be the src folder, so if the files to be consumed are not within that path gulp won't stream them.

[nickdodd79]

So, my testing has actually shown the opposite to my last comment 😄

If I put styles/test.scss on the project root and run a task in test/src/gulpfile.js with a glob of styles/*.scss it generates the expected result. If I then move the styles folder into the src folder nothing happens.

Based on this you may need to change your paths to be relative to the project root not the gulp file location (e.g. scripts/libs.js --> mytheme/uberdeal/src/scripts/libs.js).

See if that makes any difference.

[advokatb]

__TreeOutput.txt Here is the structure of my project

[nickdodd79]

Hi @advokatb

So I think I have a fix for your issue, which involves changing the paths in your gulp file.

The extension will invoke gulp from the root of the open project, which means it can't find the files you want processed based on your path variable. Instead these need to be relative to the root, not the gulp file.

As a further example, your structure is similar to this:

root
    js
        libs.js
    src
        gulpfile.js
        styles
            libs.css

You will need to change this:

var path = {
    build: {
        js: '../js/'
    },
    src: {
        styles: {
            libs: 'styles/libs.css'
        }
    }
}

to this:

var path = {
    build: {
        js: 'js/'
    },
    src: {
        styles: {
            libs: 'src/styles/libs.css'
        }
    }
}

[advokatb]

Changed to

var path = {
    build: {
        js: 'js/',
        css: 'css/',
    },

    src: {
        scripts: {
            libs: 'src/scripts/libs.js',
            scripts: 'src/scripts/scripts.js'
        },
        styles: {
            fonts: 'src/styles/fonts.css',
            libs: 'src/styles/libs.css',
            main: 'src/styles/main.scss',
            inline: 'src/styles/inline.scss'
        },
    },

    watch: {
        js: ['src/scripts/*.js', 'src/blocks/**/*.js'],
        scss: 'src/blocks/**/*.scss',
        styles: ['src/styles/*.scss', 'src/styles/*.css']
    }

};

but still doesn't work

[nickdodd79]

May be you need to experiment with the paths in your project a bit more. Does the uberdeal folder live in the project tree in vscode? If so you will need to include that in the changes (e.g. uberdeal/src/styles/lib.css).

[advokatb]

May be you need to experiment with the paths in your project a bit more. Does the uberdeal folder live in the project tree in vscode? If so you will need to include that in the changes (e.g. uberdeal/src/styles/lib.css).

This did the trick! Everything works now 👍