CODEWITHSUNDEEP
javascriptgulp
clusterBuddy
clusterBuddy

Reputation: 1554

gulpfile.js is not concatenating all css after sass build

This is my gulpfile.js

"use strict";

var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify');  // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
var lint = require('gulp-eslint'); //Lint JS files, including JSX
var livereload = require('gulp-livereload');

var sass = require('gulp-sass');
var config = {
    port: 9005,
    devBaseUrl: 'http://localhost',
    paths: {
        html: './src/*.html',
        js: './src/**/*.js',
        scss: [
            'node_modules/font-awesome/scss/font-awesome.scss',
            './src/scss/default.scss'

        ],
        sassBuilds: './src/builds/css/',
        css: [
            'node_modules/bootstrap/dist/css/bootstrap.min.css',
            'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
            './src/builds/css/*.css'
        ],
        fonts:[
            'node_modules/font-awesome/fonts/**.*'
        ],
        dist: './dist',
        mainJs: './src/main.js'
    }
}
//Start my local development server
gulp.task('connect', function() {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true
    });
});

gulp.task('open', ['connect'], function() {
    gulp.src('dist/index.html')
        .pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/', app: 'Chrome'}));
});

gulp.task('livereload', function (){
    gulp.src('./src/**/*')
        .pipe(connect.reload());
});

gulp.task('html', function() {
    gulp.src(config.paths.html)
        .pipe(gulp.dest(config.paths.dist))
        .pipe(connect.reload());
});

gulp.task('js', function() {
    browserify(config.paths.mainJs)
        .transform(reactify) //this would 'bundle' the JSX
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(config.paths.dist + '/scripts'))
        .pipe(connect.reload());
});

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
});

gulp.task('lint', function() {
    return gulp.src(config.paths.js)
        .pipe(lint({config: 'eslint.config.json'}))
        .pipe(lint.format());
});

gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html', 'livereload']);
    gulp.watch(config.paths.scss, ['sass', 'livereload']);
    gulp.watch(config.paths.js, ['js', 'lint']);
});

gulp.task('sass', function () {
    return gulp.src(config.paths.scss)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(config.paths.sassBuilds));
});

gulp.task('icons', function() {
    return gulp.src(config.paths.fonts)
        .pipe(gulp.dest(config.paths.dist + '/fonts'));
});
gulp.task('default', ['html', 'sass',  'js',  'lint', 'css', 'icons', 'open', 'watch']);

sass task first runs to create 2 css files into builds/css/

After that css task runs and should concat all css files from the config.paths.css but it doesn't, only watch task does and barely, sometimes it does, sometimes it doesn't (seriously). I feel there is some spaghetti going on here.

Upvotes: 0

Views: 53

Answers (1)

Mark
Mark

Reputation: 183124

If you are expecting that the sass task will always finish before the css task starts Don't. From the gulp documentation

Note: The tasks will run in parallel (all at once), so don't assume that the tasks will start/finish in order.

The usual way to fix this is to make the css task wait for the sass task to finish by:

gulp.task('css', ['sass'], function() {

Upvotes: 1

Related Questions