gulpmain-bower-filesgulp-load-plugins

Gulp not creating JS and CSS files using main-bower-files


I am using Gulp to concatenate/minify all JS/CSS files from the bower folder (using main-bower-files) and src folder respectively. I am using gulp-load-plugins to load the following dependencies from package.json (all of which exist in node_modules):

"dependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-filter": "^4.0.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.5.3",
    "main-bower-files": "^2.13.1"
}

Here is the gulpfile.js:

// Include Gulp
var gulp = require('gulp');

var src = 'src/';
var dest = 'public/';

// Include plugins
var plugins = require("gulp-load-plugins")({
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
    replaceString: /\bgulp[\-.]/
});

//Concat + Minify JS
gulp.task('js', function() {

var jsFiles = ['/src/js/*'];

gulp.src(plugins.mainBowerFiles().concat(jsFiles))
    .pipe(plugins.filter('*.js'))
    .pipe(plugins.concat('main.js'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest('public/js'));

});
//Concat + Minify CSS
gulp.task('css', function() {

var cssFiles = ['src/css/*'];

gulp.src(plugins.mainBowerFiles().concat(cssFiles))
    .pipe(plugins.filter('*.css'))
    .pipe(plugins.concat('main.min.css'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'css'));

});

// Default Task
gulp.task('default', ['js','css']);

Gulp is not providing any errors in the console but neither the JS nor CSS file is being created.


Solution

  • Ultimately the issue narrowed down to gulp-filter not returning any files. For anyone who is attempting a similar setup, I ended up taking a slightly alternate path by using mainBowerFiles to filter the files which achieved the same end result:

    // Include Gulp
    var gulp = require('gulp');
    
    // Include plugins
    var plugins = require("gulp-load-plugins")({
        pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
        replaceString: /\bgulp[\-.]/
    });
    
    
    var src = 'src/';
    var dest = 'public/';
    
    
    //Concat + Minify JS
    gulp.task('test', function() {
    
    console.log(plugins);
    
    });
    
    
    //Concat + Minify JS
    gulp.task('js', function() {
    
    var jsFiles = ['src/js/*'];
    
    gulp.src(plugins.mainBowerFiles('**/*.js').concat(jsFiles))
        .pipe(plugins.concat('main.min.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(dest + 'js'));
    
    });
    
    gulp.task('css', function() {
    
        var cssFiles = ['src/css/*'];
    
        gulp.src(plugins.mainBowerFiles('**/*.css', {
            overrides: {
                bootstrap: {
                    main: [
                        './dist/css/bootstrap.min.css'
                    ]
                }
            }
        }).concat(cssFiles))
        .pipe(plugins.concat('main.min.css'))
        .pipe(plugins.cleanCss())
        .pipe(gulp.dest(dest + 'css'));
    
    });
    
    
    // Default Task
    gulp.task('default', ['js','css']);