Gulp does not produce intended Css and Html folder

Question

gulp build command in command prompt creates a folder js and also a file scripts.js in dist folder. But the same does not get created for Css and Html. My css and Html folder have atlest one file and are not empty.

const gulp = require('gulp');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();

const scripts = require('./scripts');
const styles = require('./styles');

var devMode = false;



gulp.task('css',function(){
    gulp.src(styles)
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./dist/css'))
        .pipe(browserSync.reload({
            stream : true
    }))
});

gulp.task('js',function(){
    gulp.src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(browserSync.reload({
            stream : true
    }))
});

gulp.task('html',function(){
    gulp.src('./src/templates/**/*.html')
        .pipe(gulp.dest('./dist/html'))
        .pipe(browserSync.reload({
            stream : true
    }))
});

gulp.task('build',function(){
    gulp.start(['css','js','html'])
});

gulp.task('browser-sync',function(){
    browserSync.init(null,{
        open : false,
        server : {
            baseDir : 'dist'
        }
    })
});

gulp.task('start',function(){
    devMode = true;
    gulp.start(['build','browser-sync']);
    gulp.watch(['./src/css/**/*.css'],['css']);
    gulp.watch(['./src/js/**/*.js'],['js']);
    gulp.watch(['./src/templates/**/*.html'],['html']); 
});

Following is the output

The project structure

Could you provide your app/directory structure .

32teeths
– 32teeths

2017-04-03 05:44:31 +00:00
Commented Apr 3, 2017 at 5:44 — 32teeths
– 32teeths, Commented Apr 3, 2017 at 5:44
I have provided a link to the project structure

FalconFlyer
– FalconFlyer

2017-04-03 06:31:17 +00:00
Commented Apr 3, 2017 at 6:31 — FalconFlyer
– FalconFlyer, Commented Apr 3, 2017 at 6:31

32teeths · Accepted Answer · 2017-04-03 06:56:26Z

1

I would suggest you use yeoman with a generator like Fountain so that you dont have to spend your time on building the gulp tasks . Fountain has a very good gulp setup which you could customize according to your need.

While loading the files with gulp.src you need to pass the path to the files , Here you have mentioned only gulp.src(require(./styles)) which I am not sure would work . Instead pass , gulp.src('**/*.css') which would scan through all the folders and take all the .css files.

edited Apr 3, 2017 at 6:56

answered Apr 3, 2017 at 5:44

32teeths

1,5092 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FalconFlyer Over a year ago

I am new to gulp so starting from basics.

FalconFlyer Over a year ago

I have this line in my styles.js file [ "./src/css/**/*.css" ]

32teeths Over a year ago

It should be a problem with how you had mentioned the path to the file . ./ would point to the current directory , there is no requirement add src to that . In the project structure you have mentioned , ./css/*.css would include all files in the css folder and that should work for you .

Collectives™ on Stack Overflow

Gulp does not produce intended Css and Html folder

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related