CODEWITHSUNDEEP
javascriptgulp
TimFernandez
TimFernandez

Reputation: 13

I'm using Gulp and failing to produce the final development script for production.

So I'm having a slight problem with producing production ready scripts for my project. I'm using gulp to concatenate and minify my css and js, and while the css is working fine the gulp js function isn't generating my final file. Please refer to my code below:

gulp.task('js', function() {
 return gulp.src([source + 'js/app/**/*.js'])
  .pipe(concat('development.js'))
  .pipe(gulp.dest(source + 'js'))
  .pipe(rename({
   basename: 'production',
   suffix: '-min',
}))
  .pipe(uglify())
  .pipe(gulp.dest(source + 'js/'))
  .pipe(notify({ message: 'Scripts task complete', onLast: true }));
});

If anyone has encountered a similar problem or has any tips it would be much appreciated :)

Upvotes: 1

Views: 119

Answers (2)

chriskelly
chriskelly

Reputation: 7736

Based on additional infomation in the comments I realise you are generating JS files in a separate process ...

gulp is asynchronous by default. What this boils down to is that all functions try to run at the same time - if you want a specific order it must be by design. This is great because it's very fast but can be a headache to work with.

Problem

Here is what's basically happening:

// SOME TASK THAT SHOULD BE RUN FIRST
gulp.task('copy-vendor-files-to-tempfolder', function (done) {
    // copy files to vendor folder
    done()
})

// SOME TASKS THAT DEPEND ON FIRST TASK
gulp.task('complile-styles', function () { /* independent task */ })
gulp.task('concat-vendor-files', function () { /* concat files in vendor folder. depends on vendor files existing */ })

// GENERAL TASK WHICH STARTS OTHERS
gulp.task('ready', ['copy-vendor-files-to-tempfolder', 'compile-styles', 'concat-vendor-files])

When you try to run:

$ gulp ready 
GULP TASK WILL FAIL! Folder is being created at the same time!!
NOWHERE TO COPY FILES!

Solution

There are many solutions but the following module has come in handy for me again and again:

npm install run-sequence

Then in your gulpfile.js:

var runSequence = require('run-sequence')

gulp.task('ready', function (done) {
    runSequence(
        'create-folders', // do this first,
        [
            'copy-css-files',
            'copy-html-files'
        ], // do these AFTER but in parallel
        done   // callback when ready
    )
})

This will guarantee the folder exists when you try to run the other functions.

In your specific case, you should make sure the task that concatenates the JS files is run after the task that copies them out of vendor.

Note: I'm leaving other answer because it contains useful help for debugging similar issues.

HTH!

Upvotes: 1

chriskelly
chriskelly

Reputation: 7736

There is nothing wrong with your gulpfile. I tested it and it works perfectly.

The only thing I can guess is that your source is not set correctly. Did you forget the trailing slash '/' ?

I would suggest 2 things to figure it out. Include node path library to check where source is actually pointing to like this:

var path = require('path');

// in gulp task ...
path.resolve(path.resolve(source + 'js/app'));

Make sure it points where you think it does.

Secondly, you could use gulp-debug to establish that any files are found:

npm install gulp-debug

Then

var debug = require('gulp-debug');


// in gulp task ...

return gulp.src([source + 'js/app/**/*.js'])
           .pipe(concat('development.js'))
           .pipe(debug())
           .pipe(gulp.dest(source + 'js'))
           .pipe(debug())
           // etc.

Good luck!

Upvotes: 1

Related Questions