When i run this code
var watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scripts', function() {
gulp.src('./lib/*.js')
.pipe(watch('./lib/*.js'))
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});
this code builds without error but the program it is not finished
Related
I checked out my project on a new machine and get an unsatisfying console output.
Console Output
gulp default
Using gulpfile ...\gulpfile.js
Task never defined: default
Please check the documentation for proper gulpfile formatting
gulp -v
CLI version 1.2.2
Local version 4.0.0-alpha.2
Settings
Node interpreter: nodejs-6.9.2\node.exe
Gulp package: node_modules\gulp-4.0.build
Gulp File Content
'use strict';
var gulp = require('gulp');
var del = require('del');
var path = require('path');
var sass = require('gulp-sass');
var ts = require('gulp-typescript');
var gulpPromise = require("gulp-promise");
var gulpPromiseAll = require('gulp-all');
var merge = require('merge-stream');
var through = require('through2');
var runSequence = require('run-sequence');
var async = require("async");
var Rx = require('rx');
var chok = require('chokidar');
var deleteEmpty = require('delete-empty');
var browserSync = require('browser-sync').create();
var webserver = require('gulp-webserver');
var historyApiFallback = require('connect-history-api-fallback');
/* A few functions like this */
var yadda1 = function() {
return yadda9("yadda", yaddayadda);
};
/* A few tasks like this */
gulp.task('build', function(){
return gulpPromiseAll(
yadda1(),
yadda2(),
yadda3()
).then(
function() {
console.log("yadda");
}, function(err) {
console.error("yadda:", err);
}
);
});
gulp.task('default', gulp.series('build', 'serve', function(done) {
console.log("Default task that cleans, builds and runs the application [END]");
done();
}));
What am I doing wrong?
I just had this problem.
We both are using browser-sync, and a task related to browser-sync is where the problem was in my code, so there's a good chance that you have the same problem (and possibly in your other gulp tasks as well), but can't say for sure because you didn't share the tasks' code.
The problem:
In gulp 3.x you could write code like this:
gulp.task('watch', () => {
gulp.watch('./dev/styles/**/*.scss', ['styles'];
...
});
You can't in gulp 4.x.
The solution:
You have to pass a function instead of the name of a task in these cases. You can do this by passing a gulp.series() function. The above code becomes:
gulp.task('watch', () => {
gulp.watch('./dev/styles/**/*.scss', gulp.series('styles'));
...
});
Try making this change wherever applicable. Worked for me.
I want to be able to send the browserSync external URL as a parameter for an external node script in my gulp file. How can I get at that external URL through the browserSync object (or some other way)?
var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
});
});
gulp.task('config', shell.task([
"node scripts/someNodeScript.js browserSync.externalURL"
]));
UPDATE
Based on the excellent answer by #sven-shoenung below, I slightly tweaked his solution and am successfully using this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
var browserSyncDone = function () {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'});
};
gulp.task('default', ['browser-sync']);
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
browserSyncDone();
});
});
You can use browserSync.getOptions('urls') to get a Map of all access URLs. It returns something like this:
Map {
"local": "http://localhost:3000",
"external": "http://192.168.0.125:3000",
"ui": "http://localhost:3001",
"ui-external": "http://192.168.0.125:3001"
}
Note that is only available after browser-sync is successfully initialized, so you need to pass a callback function to browserSync.init() or you'll try to get the value too soon.
You won't be able to use gulp-shell for the same reason. shell.task() will be set up before browser-sync has initialized, so browserSync.getOptions('urls') isn't available yet.
I recommend you use the standard nodejs child_process.spawn() instead.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var spawn = require('child_process').spawn;
var externalUrl;
gulp.task('default', ['browser-sync', 'config']);
gulp.task('browser-sync', function(done) {
browserSync.init({
proxy: "localhost:8024",
open: "external"
}, function() {
externalUrl = browserSync.getOption('urls').get('external');
done();
});
});
gulp.task('config', ['browser-sync'], function(done) {
spawn('node', ['scripts/someNodeScript.js', externalUrl], {stdio:'inherit'}).on('close', done);
});
I'm pretty new to node. I built a sample express app and wrote some BDD tests for it using cucumber.js. I would like to automate the tests using gulp so that when I run my tests it will first start the express app and, once the server is up, run through the tests. However, currently the tests run before the server is up and therefore all fail. Is there a way to wait (using gulp) for the server to start and only then run the tests?
I'm using gulp-cucumber and gulp-express here (somewhat hidden by gulp-load-plugins).
My gulpfile (partial):
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')();
gulp.task('server', function () {
plugins.express.run(['bin/www']);
});
gulp.task('cucumber', ['server'], function() {
return gulp.src('features/*').pipe(plugins.cucumber({
'steps': 'features/steps/*.steps.js',
'support': 'features/support/*.js'
}));
});
gulp.task('test', ['server', 'cucumber']);
I have to use this solution - https://www.npmjs.com/package/run-sequence
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')(),
runSequence = require('run-sequence');
gulp.task('server', function () {
plugins.express.run(['bin/www']);
});
gulp.task('cucumber', function() {
return gulp.src('features/*').pipe(plugins.cucumber({
'steps': 'features/steps/*.steps.js',
'support': 'features/support/*.js'
}));
});
gulp.task('test', function(){
runSequence('server', 'cucumber');
});
I'm using Ubuntu and it's work fine but when I run the gulp command I got a problem. The file was created but Gulp changes the file permissions and the browser can't read the file. So I can't navigate in my project website. =/
My gulpfile.js
var gulp = require('gulp');
//~ var gulp = require('gulp-util');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var src='./wp-content/themes/wikitricks';
var scripts=[
src + '/js/jquery.min.js',
src + '/js/jquery-ui.js',
src + '/js/jquery.tooltipster.min.js',
src + '/js/featherlight.min.js',
//~ src + '/js/jquery.masonry.min.js',
src + '/js/masonry.pkgd.min.js',
];
gulp.task('js', function() {
return gulp.src(scripts)
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest(src))
});
gulp.task('default', ['js'], function () {
gulp.watch(scripts, ['js']);
});
I found a solution but I still don't know why it happens...
var chmod = require('gulp-chmod');
gulp.task('copy-images', function() {
gulp.src(path_resource_images + '**/*.jpg')
.pipe(chmod(666))
.pipe(gulp.dest(path_app_images));
});
From:
Gulp - Handle read-only permissions for dest files?
I have the following gulpfile:
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var traceur = require('gulp-traceur');
var concat = require('gulp-concat');
var uglify = require('gulp-uglifyjs');
gulp.task('default', function () {
return gulp.src('src/*.js')
.pipe(sourcemaps.init())
.pipe(traceur())
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
When running this code i don't get a source map in the all.js file.
When i remove the line:
.pipe(uglify())
I get the source map but then my code is not uglified.
I tried to debug the code with gulp-utils but did not find anything out(how to debug gulp-sourcemaps not doing anything?).
How can this issue be fixed?
I changed 'gulp-uglifyjs' to 'gulp-uglify' and everything worked
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var traceur = require('gulp-traceur');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var gutil = require('gulp-util')
gulp.task('default', function () {
return gulp.src('src/*.js')
.pipe(sourcemaps.init().on('error', gutil.log))
.pipe(traceur())
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});