We Keep Coding

gulp.src from a separate file doesnt work

I am trying to write a gulpfile as follows :
var gulp = require('gulp');
// other dependencies go here ....
// source of files
var inputs = require('./asset_source.js');
// a simple task
gulp.task('css', function () {
gulp.src(inputs.css)
.pipe(debug())
.pipe(plumber())
.pipe(maps.init())
.pipe(concatCss('libs.css'))
.pipe(maps.write('../srcmaps'))
.pipe(plumber.stop())
.pipe(gulp.dest('assets/css'));
});
// the watcher
gulp.task('watch', function () {
gulp.watch('./asset_source.js', ['css']);
});
// default task
gulp.task('default', ['browser-sync', 'watch']);
And the source of assets (asset_source.js) file is something like this :
module.exports = {
css: [
'path/to/a/file.css',
'path/to/another/file.css',
.......
.......
],
js: [
'path/to/a/file.js',
'path/to/another/file.js',
.......
.......
]
};
Now I run the app with by just typing gulp in the console and it starts in a browser thanks to browsersync. I have all the css,scss,js assets listed in the asset_source.js file which is in the same directory as the gulpfile.js. What I want to achieve is if I append or remove a value to/from either of the arrays in asset_source.js, the concerned task should run while the gulp is already running. In this case css should be running on any change to asset_source.js with its updated content.
But instead it doesnt do so. Even if there is a change in the asset_source file, gulp uses the initial content and runs the task. However if run gulp css in a separate terminal, it works.
Please help me where I am going wrong or if it is even possible. Thanks.

Gulp run and finish tasks then exit, not running gulp.dest()

I have the snippet below that runs my tasks:
gulp.task('default', ['js', 'css', 'test'], function() {
process.exit();
});
When not using the process.exit(); line it works, and I see the app-xxxxxx.js in my build folder. Here's an abbreviated version of my js task (logic remains the same in the others but has a different responsibility):
gulp.task('js', function(cb) {
var scripts = ['script1.js', 'etcetc.js'];
var g = gulp.src(javascripts)
.pipe(concat('app-xxxxx.js'))
.pipe(gulp.dest('public/build')); //the file isn't in public/build
setTimeout(cb, 100);
return g;
});
My goal is to make sure all of my tasks finish, and when they do finish properly, exit gulp. What's the problem with the snippets above?

i hope to help, you do not need process.exit() because tasks gulp finish always if you use 'concat' your file should look this:
var gulp = require('gulp');
concat = require('concat');
gulp.task('task', function() {
gulp.src('js/*.js')
.pipe(concat('newFile.js', {newLine: ';'}))
.pipe(gulp.dest('js/build/'))
});
And finally write gulp task

gulp watch with babel then pm2 restart

\Hey guys I'm totally stuck with this one.
Basically I want on my local dev to be able to have gulp watch my src js files files and transform them with babel and output them to my dist folder and then after that's done have pm2 restart node to load the latest changes.
The problem I'm having is I can't for the life of me figure out how to add a callback to watch so that the call to restart pm2 only happens after babel has done its magic transforming the files.
var gulp = require("gulp");
var babel = require("gulp-babel");
var pm2 = require("pm2");
var watch = require("gulp-watch");
var plumber = require("gulp-plumber");
var SRC = "src/**/*js";
var DIST = "dist/";
function restartPM2() {
//restart pm2 code in here
}
gulp.task("default", function () {
return gulp.src(SRC)
.pipe(watch(SRC))
.pipe(plumber())
.pipe(babel())
.pipe(plumber.stop())
.pipe(gulp.dest(DIST));
// somewhere in here need a call back after babel has transformed
// the code and saved it to dist/ to then call restartPM2
});
Any help would be greatly appreciated!

First, you're not watching the right way. Then, you should keep things separated. That's how I'd do:
var paths = {
babel: './somedir'
}
//basic babel task
gulp.task('babel', function() {
return gulp.src(paths.babel)
.pipe(babel())
.pipe(gulp.dest('./'))
})
//see below for some links about programmatic pm2
gulp.task('pm2', function(cb) {
pm2.connect(function() {
pm2.restart('echo', function() {
return cb()
})
})
})
gulp.task('default', ['babel']) //I don't restart pm2 with the default task but you could
//the watch task
gulp.task('watch', function() {
//their could be more watchers here ofc
gulp.watch(paths.babel, ['babel', 'pm2'])
})
If you launch gulp watch, it'll watch the paths.babel and, on change, execute both tasks (babel, pm2).
If you only execute gulp (or gulp babel in this example), it'll launch the appropriate task. You'd be able to launch gulp pm2 too.
Ressources:
pm2 programmatic doc
gulp doc

Error No such file or directory during Gulp-Ruby-Sass Task

I'm using Gulp as my task runner, and gulp-ruby-sass to compile my sass files into css.
The error I'm getting on my gulp default task:
My default Gulp task:
gulp.task('default', ['delete', 'web_css', 'dash_css', 'web_js', 'dash_js']);
My 2 compile SASS tasks:
// Compile public SASS
gulp.task('web_css', function() {
return sass('client/website/_sources/sass/bitage_web.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/website/assets/css'));
});
// Compile dashboard SASS
gulp.task('dash_css', function() {
return sass('client/dashboard/_sources/sass/bitage_app.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('client/dashboard/assets/css'));
});
Both tasks above are virtually identically.
When I run the default task (gulp):
The website css compiles ok
All the js compiles ok
But then I get that error before the dash_css finishes, and the
css is not compiled :(
Additional notes:
If make a change in gulp watch the dash_css will compile just
fine.
If I run just gulp dash_css it also compiles just fine.
I only have this Errno::ENOENT bug when I run the default task.
Do you see anything strange above? Or have run into this issue before?

Use callback so that gulp knows when the task is complete:
gulp.task('delete', function(cb) {
del([
'client/website/assets/css/maps',
'client/website/assets/css/bitage_web.css',
'client/dashboard/assets/css/maps',
'client/dashboard/assets/css/bitage_app.css',
'client/website/assets/js/*',
'client/dashboard/assets/js/*'
], cb);
});
Make delete run before other tasks for example with run-sequence.

I've changed
gulp.task('web_css', function() {
return sass(....
to:
gulp.task('web_css', function() {
return gulp.src('

GulpJS Task automatically minify when file changes

I need to minify automatically all files when some change occurs in my js or less files.
I have some Tasks for Minify my less files and js files called 'styles','services' and 'controlles'.
For minify this files i just execute this task and everything forks fine:
gulp.task('minify', ['styles', 'services','controllers']);
Instead run this task manually i want to do automatic in development mode. How i can do this?

What you need to do is run your project with nodemon
nodemon = require('gulp-nodemon');
Nodemon runs your code and automatically restart when your code changes.
So, for automatic minification use this Gulp Task:
gulp.task('watch', function() {
gulp.watch(pathLess, ['styles']);
gulp.watch(pathJs.services, ['services']);
gulp.watch(pathJs.controllers, ['controllers']);
});
And then setup nodemon for run your project
gulp.task('nodemon', function () {
nodemon({ script: 'server.js'})
.on('start', ['watch'], function () {
console.log('start!');
})
.on('change', ['watch'], function () {
console.log('change!');
})
.on('restart', function () {
console.log('restarted!');
});
})
Now if you type in prompt : gulp nodemon your server.js will run, and you will be able to develop with automatic minification.
I hope it helps