Gulp build command gives me this error message - gulp

$ gulp build
[02:36:37] Using gulpfile C:\xampp\htdocs\melodic\gulpfile.js
[02:36:37] Starting 'build'...
[02:36:37] Starting 'clean:dist'...
[02:36:37] Finished 'clean:dist' after 4.63 ms
[02:36:37] Starting 'sass'...
[02:36:37] Starting 'useref'...
[02:36:37] Starting 'img'...
[02:36:37] Starting 'cleancss'...
[02:36:37] Finished 'cleancss' after 37 ms
C:\xampp\htdocs\melodic\node_modules\gulp-useref\node_modules\vinyl-
fs\lib\src\index.js:20
throw new Error('Invalid glob argument: ' + glob);
^
Error: Invalid glob argument:
at Object.src (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\vinyl-fs\lib\src\index.js:20:11)
at DestroyableTransform.addAssetsToStream
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:62:15)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:124:31
at Array.forEach (native)
at DestroyableTransform.processAssets
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:115:11)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:178:31
at Stream.<anonymous> (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\event-stream\index.js:318:20)
at _end (C:\xampp\htdocs\melodic\node_modules\through\index.js:65:9)
at Stream.stream.end
(C:\xampp\htdocs\melodic\node_modules\through\index.js:74:5)
at DestroyableTransform.onend
(C:\xampp\htdocs\melodic\node_modules\through2\node_modules\readable-
stream\lib\_stream_readable.js:577:10)
I have tried to remove the running tasks one by one but to no avail. What throws me off also is the fact that it seems to run through all the tasks and even finishing them and then crashing as the last task is finished. Thanks in advance.
EDIT: Here is my gulpfile as I forgot to include it.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
//Requires browser synch
var browserSync = require('browser-sync').create();
//Requires userref
var useref = require('gulp-useref');
//Requires uglify
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
//Requires cssnano
var cssnano = require('gulp-cssnano');
//Requires imagemin
var imagemin = require('gulp-imagemin');
//Requires cache
var cache = require('gulp-cache');
//Requires del
var del = require('del');
//Requires run-sequence
var runSequence = require('run-sequence');
//requires postcss
var postcss = require('gulp-postcss');
//ACTIVE COMMANDS
/*Run 'gulp browserSync' in commandline.
This task automatically reloads the broswer upon each save of document*/
gulp.task('browserSync', function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./app"
},
})
});
/*Run 'gulp sass' in command line.
THIS TASK GETS ALL SCSS IMPORTED INTO THE app.scss FILE AND CONVERTS IT INTO app.css.
THIS TASK IS A ONE TIME CONVERSTION*/
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
/*Run 'gulp watch' in command line.
THIS TASK GETS ALL SCSS AND OTHER FILE TYPES AND CONVERTS THEM ACITVELY.
THIS TASK IS ONGOING*/
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
});
//PRODUCTION/FINAL COMMANDS
/*Run 'gulp useref' in command line.
THIS TASK GETS ALL CSS AND OTHER FILE TYPES AND JOINS DIFFERENT FILES AND MINIMIZES THEM IN THE DIST FOLDER.
*/
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('cleancss', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
/*Run 'gulp img' in command line.
MINIMIZSES PHOTOS TO THE DIST FOLDER*/
gulp.task('img', function(){
return gulp.src('app/img/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin({
// Setting interlaced to true
interlaced: true
}))
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/img'))
});
/*Run 'gulp fonts' in command line.
CLEANS THE DIST DIRECTORY FOR UNUSED FILES*/
gulp.task('clean:dist', function() {
return del.sync('dist');
});
/*Run 'gulp fonts' in command line.
CLEANS THE IMAGE CACHE CREATED EARLIER*/
gulp.task('cache:clear', function (callback) {
return cache.clearAll(callback)
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'img', 'cleancss'],
callback
)
});
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
});
EDIT: Included my gulpfile for further details.

Related

Returning a stream but still getting error "Did you forget async completion?" Gulp 4

I am building a website on gulp, this code snippet basically contains 3 tasks browser-sync jekyll-build stylus, browser-sync task depends upon jekyll-build.
browser-sync works fine but the stylus function in which I am returning a stream is giving a error which is not expected.
Below is my code snippet.
I am returning a stream here which is one of the solutions mentioned in the doc Async Completion but still I get the error.
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
stylus = require('gulp-stylus'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
jeet = require('jeet'),
rupture = require('rupture'),
koutoSwiss = require('kouto-swiss'),
prefixer = require('autoprefixer-stylus'),
imagemin = require('gulp-imagemin'),
cp = require('child_process');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
var jekyllCommand = (/^win/.test(process.platform)) ? 'jekyll.bat' : 'jekyll';
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn(jekyllCommand, ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', gulp.series('jekyll-build'), function() {
browserSync({
server: {
baseDir: '_site'
}
});
done();
});
/**
* Stylus task
*/
gulp.task('stylus', function() {
return gulp.src('src/styl/main.styl').pipe(plumber())
.pipe(
stylus({
use: [koutoSwiss(), prefixer(), jeet(), rupture()],
compress: true,
})
)
.pipe(gulp.dest('_site/assets/css/'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
ERROR SHOWN BELOW
[23:28:52] Using gulpfile ~/berserker1.github.io/gulpfile.js
[23:28:52] Starting 'default'...
[23:28:52] Starting 'browser-sync'...
[23:28:52] Starting 'jekyll-build'...
Configuration file: /home/aaryan/berserker1.github.io/_config.yml
Source: /home/aaryan/berserker1.github.io
Destination: /home/aaryan/berserker1.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.234 seconds.
Auto-regeneration: disabled. Use --watch to enable.
[23:28:52] Finished 'jekyll-build' after 818 ms
[23:28:52] Finished 'browser-sync' after 819 ms
[23:28:52] Starting 'stylus'...
[23:28:53] The following tasks did not complete: default, stylus
[23:28:53] Did you forget to signal async completion?
There is an issue here (whether it is the same as the one in your question we'll see if it helps):
gulp.task('browser-sync', gulp.series('jekyll-build'), function() {
browserSync({
server: {
baseDir: '_site'
}
});
done();
});
I gulp v4 task takes only two arguments - the code above has three. This should be correct:
gulp.task('browser-sync', gulp.series('jekyll-build', function(done) {
browserSync({
server: {
baseDir: '_site'
}
});
done();
}));
Plus, I added the done parameter in the first line. See if this helps.

Gulp workflow for Express with SASS, BrowserSync, Uglify and Nodemon

Problems I'm facing:
The browser doesn't reflect live changes in .scss or .js
I don't understand whether we have to return the stream from the gulp.task() or not, I visited some websites and watched lectures some of which used return and some didn't.
Cannot understand the flow of execution of gulpfile (which statement runs first, then which and so on)
This is my current code of gulpfile.js.
"use strict";
var gulp = require('gulp');
var sass = require('gulp-sass');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
gulp.task('default', ['nodemon'], function(){
gulp.watch("src/sass/*.scss", ['sass']);
gulp.watch("src/js/*.js", ['js']);
gulp.watch("views/*.ejs").on('change',browserSync.reload); //Manual Reloading
})
// Process JS files and return the stream.
gulp.task('js', function () {
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('public/javascripts'));
});
// Compile SASS to CSS.
gulp.task('sass', function(){
// gulp.src('src/sass/*.scss') //without return or with return? why?
return gulp.src('src/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/stylesheets'))
.pipe(browserSync.stream());
});
// Setup proxy for local server.
gulp.task('browser-sync', ['js','sass'], function() {
browserSync.init(null, {
proxy: "http://localhost:3000",
port: 7000,
});
});
gulp.task('nodemon', ['browser-sync'], function(cb){
var running = false;
return nodemon({script: 'bin/www'}).on('start', function(){
if(!running)
{
running = true;
cb();
}
});
})
You may look at project structure at https://github.com/DivyanshBatham/GulpWorkflow
Try this:
"use strict";
var gulp = require('gulp');
var sass = require('gulp-sass');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
// First, run all your tasks
gulp.task('default', ['nodemon', 'sass', 'js'], function(){
// Then watch for changes
gulp.watch("src/sass/*.scss", ['sass']);
gulp.watch("views/*.ejs").on('change',browserSync.reload); //Manual Reloading
// JS changes need to tell browsersync that they're done
gulp.watch("src/js/*.js", ['js-watch']);
})
// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
browserSync.reload();
done();
});
// Process JS files and return the stream.
gulp.task('js', function () {
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('public/javascripts'));
});
// Compile SASS to CSS.
gulp.task('sass', function(){
return gulp.src('src/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/stylesheets'))
.pipe(browserSync.stream());
});
// Setup proxy for local server.
gulp.task('browser-sync', ['js','sass'], function() {
browserSync.init(null, {
proxy: "http://localhost:3000",
port: 7000,
});
});
gulp.task('nodemon', ['browser-sync'], function(cb){
var running = false;
return nodemon({script: 'bin/www'}).on('start', function(){
if(!running)
{
running = true;
cb();
}
});
})
Also, you should consider adding the JS file to your index.ejs
Eg: <script src='/javascripts/main.js'></script>
More help: https://browsersync.io/docs/gulp
I'll answer what I can.
You don't always have to return the stream in a gulp task but you should since you have some tasks, like 'browser-sync' that are dependent on other tasks, ['js','sass'], finishing. The purpose of returning the stream is to signal task completion. It is not the only way to signal task completion but one easy way.
You are already doing this in your ['js','sass'] tasks with the return statements.
Your 'js' task needs a .pipe(browserSync.stream()); statement at the end of it like your 'sass' task. Or try .pipe(browserSync.reload({stream:true})); sometimes that variant works better.
You have both browser-sync and nodemon running - that I believe is unusual and may cause problems - they do much the same thing and do not typically see them running together. I would eliminate nodemon from your file.
Flow of execution:
(a) default calls ['nodemon', 'sass', 'js'] : these run in parallel.
(b) nodemon call 'browser-sync'. 'browserSync' must finish setting up before 'nodemon' gets into its function.
(c) 'browser-sync', ['js','sass'], Here browser-sync is dependent upon 'js' and 'sass' which run in parallel and must finish and signal that they have finished by returning the stream for example before browser-sync continues.
(d) After 'js', 'sass', 'browser-sync' and 'nodemon' have completed, your watch statements are set up and begin to watch.

Gulp-sass with susy and sourcemaps

I'm trying to get Susy to work with gulp-sass (libsass) and sourcemaps. It's the sourcemaps that seems to be the problem, since without them, everything works as it should. I tried adding the IncludePaths to the Sass task but that didn't help. Susy is installed with Bower and resides in assets/bower_components/susy.
The error I'm getting looks like this:
c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_mo
dules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-ma
p\lib\source-map\source-map-consumer.js:415
throw new Error('"' + aSource + '" is not in the SourceMap.');
^
Error: "/bower_components/susy/sass/susy/language/susy/_container.scss" is not i
n the SourceMap.
at SourceMapConsumer_sourceContentFor [as sourceContentFor] (c:\Users\Devote
e\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-mini
fy-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-ma
p\source-map-consumer.js:415:13)
at SourceMapGenerator.<anonymous> (c:\Users\Devotee\hemsidor\vvv\www\bb2-new
-homepage\htdocs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-
sourcemaps-apply\node_modules\source-map\lib\source-map\source-map-generator.js:
233:42)
at Array.forEach (native)
at SourceMapGenerator_applySourceMap [as applySourceMap] (c:\Users\Devotee\h
emsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-minify-
css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-map\s
ource-map-generator.js:232:34)
at applySourceMap (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs
\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply
\index.js:23:15)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:122:11
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:42:7
at whenSourceMapReady (c:\Users\Devotee\hemsidor\vvv\www\new-project\ht
docs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\clea
n.js:94:62)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\node_modules\clean-css\lib\clean.js:100:77
at fromString (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app
\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\utils\input-
source-map-tracker.js:25:10)
Sorry for the horrible formatting (Bash on Windows..).
My Gulpfile looks like this:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// ==== CONFIGURATION ==== //
// Project paths
var src = 'assets/',
dist = 'dist/',
bower = src + 'assets/bower_components/',
css = dist + 'css/',
js = dist + 'js/'
;
// ### JS-linting-compiling
// Lint and minify our Javascript files
gulp.task('js-linting-compiling', function(){
// read all of the files that are in script/lib with a .js extension
return gulp.src('assets/js/*.js')
// run their contents through jshint
.pipe(jshint())
// report any findings from jshint
.pipe(jshint.reporter('default'))
// concatenate all of the file contents into a file titled 'all.js'
.pipe(concat('all.js'))
// write that file to the dist/js directory
.pipe(gulp.dest(js))
// now rename the file in memory to 'all.min.js'
.pipe(rename('all.min.js'))
// run uglify (for minification) on 'all.min.js'
.pipe(uglify())
// write all.min.js to the dist/js file
.pipe(gulp.dest(js));
});
// ### SASS-TO-CSS
// `gulp sass-to-css` - Compile SASS into CSS, autoprefix it and minify it. Also generate source maps (stripped in minified version)
gulp.task('sass-to-css', function () {
gulp.src('assets/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'assets/bower_components/susy/sass'
],
style: 'expanded',
errLogToConsole: true
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({
suffix: '_min'
}))
.pipe(minifyCSS({
keepSpecialComments:0,
}))
.pipe(gulp.dest(css))
.pipe(reload({stream: true}));
});
// ### Clean
// `gulp clean` - Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
del([
// here we use a globbing pattern to match everything inside the `dist` folder, except our gitkeep file
'dist/**/*',
'!dist/.gitkeep{,/**}'
], { dot: true },
cb);
});
// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['sass-to-css', 'js-linting-compiling'], function() {
});
// ### Gulp
// `gulp` - Clean up the dist directory and do a complete build.
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
browserSync({
proxy: "local.project.dev",
host: "localhost",
notify: true,
});
gulp.watch(['assets/sass/**/*.scss'], ['sass-to-css']);
gulp.watch(['assets/js/**/*.js'], ['js-linting-compiling']);
gulp.watch('**/*.php', function() {
browserSync.reload();
});
});
Any ideas?
I had the same issue...
Trying to use the includePaths,
the #import in the sass file....
mixing one then the other then both ...
The only thing that has worked for me was moving from susy from bower_components to my sass folder, use a "normal" #import, and it worked.
I am not expert in gulp / node, it might look like a path issue => bower_components is outside the src definition of the gulp task... :/
Hope that helps

Gulp.src isn't returning any files, or something?

I was working on a new project at home last week and now I am in the office I am having no luck with Gulp.
There are no errors when I run Gulp but it isn't creating any files, I tried using Gulp-tap to see if anything was getting piped but its not. I am sure I am in the correct cwd and the file exists, but I have no luck. The task is also been run, confirmed by console.log'ing.
C:\Users\Jonathan\Documents\GitHub\ITMS-Backend>gulp
[11:02:16] Using gulpfile ~\Documents\GitHub\ITMS-Backend\Gulpfile.js
[11:02:16] Starting 'lint'...
[11:02:16] Starting 'sass'...
[11:02:16] Starting 'global-scripts'...
[11:02:16] Starting 'polymer'...
[11:02:16] Finished 'polymer' after 4.4 ms
[11:02:16] Finished 'lint' after 23 ms
[11:02:16] Finished 'global-scripts' after 14 ms
[11:02:16] Finished 'sass' after 19 ms
[11:02:16] Starting 'default'...
[11:02:16] Finished 'default' after 4.53 µs
My Gulp file as of current
var bower_root = 'public/components/'
webcomponents_dir = 'public/webcomponents';
var gulp = require('gulp');
var fs = require('fs');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var vulcanize = require('gulp-vulcanize');
var polymer_modules = [
"core-elements/core-elements.html",
"paper-elements/paper-elements.html"
];
// Lint Task
gulp.task('lint', function() {
return gulp.src('app/assets/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('app/assets/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/css'));
});
// Concatenate & Minify JS
gulp.task('global-scripts', function() {
return gulp.src('app/assets/js/*.js')
.pipe(concat('global.js'))
.pipe(gulp.dest('public/js'))
.pipe(rename('global.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('app/assets/js/*.js', ['lint', 'global-scripts']);
gulp.watch('app/assets/scss/*.scss', ['sass']);
});
gulp.task('polymer', function() {
// Move Polymer JS File
gulp.src("polymer/polymer.min.js", {cwd: bower_root})
.pipe(gulp.dest("public/js/"));
// Move webcomponents file
gulp.src(bower_root + "webcomponentsjs/webcomponents.min.js")
.pipe(gulp.dest("public/js/"));
// CSS Polymer is shipped with
gulp.src("polymer/layout.html", {cwd: bower_root})
.pipe(gulp.dest(webcomponents_dir));
// Vulcanise
gulp.src(polymer_modules, {cwd: bower_root})
.pipe(vulcanize({
dest: './public/webcomponents',
strip: true
}))
.pipe(gulp.dest(webcomponents_dir));
});
// Default Task
gulp.task('default', ['lint', 'sass', 'global-scripts', 'polymer']);

Gulp shell delay

I'm trying to execute a shell command at the end of a series of gulp tasks. I noticed that the changes written to the project's files aren't being written before the shell command picks up some of the files and copies them elsewhere. I'm using gulp-shell to execute my shell commands.
I found that if I executed a 'ls' command before my file copy, there's enough of a delay that the files are all written before I try to copy them. Is there a cleaner way to do this?
Here's the gruntfile:
var gulp = require('gulp');
var shell = require('gulp-shell');
var jshint = require('gulp-jshint');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
var minifyHTML = require('gulp-minify-html');
var concat = require('gulp-concat');
//Uncomment out this line before going to production
//var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
// JS hint task
gulp.task('jshint', function() {
gulp.src('./code/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './code/img/**/*', imgDst = './www/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './code/*.html', htmlDst = './www';
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./code/js/index.js', './code/js/*.js'])
.pipe(concat('script.js'))
//Uncomment out this line before going to production
//.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./www/'));
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['./code/css/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./www/'));
});
gulp.task('prepare', shell.task(['ls', 'cordova prepare']));
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'prepare'], function() {
});
It's the prepare task - when it runs, the other files haven't finished executing yet.
It seems that I can set a dependent task that must finish before my prepare:
gulp.task('prepare', [styles], shell.task(['ls', 'cordova prepare']));
I haven't tested it, but I expect this will work?
Try gulp-run-sequence Gulp tasks are Async and this enables them to fire synchronously. Should solve your issue.