I try following code.
var gulp = require("gulp");
var ps = require('child_process').exec;
var watch = require('gulp-watch');
gulp.task('exec_file', function() {
var command = "/mnt/c/pg/expect/folder_sync";
ps(command , function (err, stdout, stderr) {
console.log(stdout);
});
});
gulp.task("watch", function() {
var targets = [
'./**'
];
return watch(targets, ['exec_file']);
});
However the code make a error.
What should I do?
Inside of the watch, you have to inform Gulp which task to start.
Replace the following line:
return watch(targets, ['exec_file']);
with this:
watch(targets, function(){
gulp.start('exec_file');
})
or with this:
watch(targets).on('change', function(){ gulp.start('exec_file')});
P.S I'm not sure if you have to return anything.
Related
I have problem. Yestrday I had to update the Node.js kernel and now that I change something in the LESS file, there will be no css update. Gulpfile is the same as before the update. Could someone advise me what's wrong with my gulpfile script?
The HTML file update is OK.
//*********** IMPORTS *****************
var gulp = require('gulp'),
browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat-css');
var cssmin = require('gulp-cssmin');
/* BROWSERSYNC */
gulp.task('browserSync', function () {
var files = ['orient-spa/**'];
browserSync.init(files, {
server: {
baseDir: 'orient-spa/',
index: 'index.html'
},
logPrefix: 'OS01',
browser: ['chrome']
});
});
gulp.task('css', function () {
var processors = [
autoprefixer
];
return gulp.src('./orient-spa/skins/less/index-files.less')
.pipe(less())
.pipe(postcss(processors))
.pipe(gulp.dest('./orient-spa/skins/css/'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./orient-spa/skins/less/*.less', ['css']);
gulp.watch('./orient-spa/skins/css/*.css', ['concatMinify']);
});
gulp.task('concatMinify', function () {
return gulp.src('./orient-spa/skins/css/*.css')
.pipe(concat("index.css"))
.pipe(cssmin())
.pipe(gulp.dest('./orient-spa/skins/css/compiled'))
.pipe(livereload());
});
gulp.task('default', ['browserSync', 'watch', 'css', 'concatMinify']);
Thanks for your advice :-)
I try this path, but problem remains.
Last version node.js was Node.js 7.2.1 (Node.js), now Node.js 9.8.0.
I attach an image to the console after changing 1 line in the LESS file.
Here I see that the set of commands does not call correctly. Or they are called repeatedly. Do not you see a mistake here, please?
Thanks for your advice
I'm wanting to only load one JS file which uses jQuery code, but am confused about how to best do it. The thing I'm worried about is doing something sloppy like the below to solve the issue of loading all the scripts under $(document).ready(function(){});
gulp.task('compile-js', function() {
gulp.src(['./js/initialization.js', './stuff.js'./js/end.js'])
.pipe(concat('script.js'))
.pipe(gulp.dest('./public/javascripts/'));
});
where initialization.js and end.js are for the wrapping of the document.ready function (I know lol, hence asking)
Is there a better way of doing it?
Write a gulp file, lets call it 'jquery-noconflict.js'
var through = require('through2');
var gutil = require('gulp-util');
var fs = require('fs');
module.exports = function(){
var stream = through.obj(function(file, enc, cb) {
if (file.isStream()) {
this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
return cb();
}
if (file.isBuffer()) {
var contents = file.contents.toString();
file.contents = Buffer.concat([new Buffer('jQuery(document).ready(function(){'), file.contents, new Buffer('})')]);
}
cb(null, file);
}, function(){
})
return stream;
};
You might need to 'npm install through2'
now in your gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var jquery = require('./jquery-noconflict');
gulp.task('compile-js', function(){
gulp.src('./stuff.js')
.pipe(concat('script.js'))
.pipe(jquery())
.pipe(gulp.dest('./public/javascripts/'))
})
I don't understand what's wrong with this code. When I run it for the first time, rev_collector doesn't work. I mean: 'rev' and 'clean' works great, but css file name in index http didn't change ('rev_collector').
BUT it works properly when I start it again.
var gulp = require('gulp'),
less = require('gulp-less'),
rev_append = require('gulp-rev-append'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
gutil = require('gulp-util'),
rimraf = require('rimraf'),
revOutdated = require('gulp-rev-outdated'),
path = require('path'),
through = require('through2');
gulp.task('rev', function(){
gulp.src('./src/less/*.less')
.pipe(less())
.pipe(rev())
.pipe(gulp.dest('./www/css/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./src/manifest/'));
});
gulp.task('rev_collector', ['rev'], function(){
return gulp.src(['./src/manifest/**/*.json', './www/index.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('./www/'));
});
function cleaner() {
return through.obj(function(file, enc, cb){
rimraf( path.resolve( (file.cwd || process.cwd()), file.path), function (err) {
if (err) {
this.emit('error', new gutil.PluginError('Cleanup old files', err));
}
this.push(file);
cb();
}.bind(this));
});
}
gulp.task('clean', ['rev_collector'], function() {
gulp.src( ['./www/**/*.*'], {read: false})
.pipe( revOutdated(1) ) // leave 2 latest asset file for every file name prefix.
.pipe( cleaner() );
return;
});
gulp.task('rev_all', ['rev', 'rev_collector', 'clean']);
Today, I met the same problem.
After I got nothing from this page, I searched a lot.
I fount my problom came from the order the files loaded.
So I use a new plugin:
var runSequence = require('run-sequence');
then, I rewrite the load code:
gulp.task('default',['build']);
gulp.task('build', function (done) {
runSequence(
['clean'],
['images'],
['statcstyles', 'staticjs'],
['scripts'],
['styles'],
['html'],
done);
});
The code make sure that revCollector will always loaded after manifest create.
Then my problem solved.
I hope it helps you.
I'm a bit stumped with gulp. Based on the docs, in order to get sequential execution, I should be returning the stream from my tasks, so i tried to do the below for my gulpfile. But as best I can tell, there's a race condition. Half the time I get ENOENT, lstat errors, the other half it succeeds, but my deployDir has weird folder names and missing files all over.. Am I missing something? Is there a trick to this?
var gulp = require('gulp'),
filter = require('gulp-filter'),
mainBowerFiles = require('main-bower-files'),
del = require('del'),
inject = require("gulp-inject"),
uglify = require('gulp-uglifyjs');
var config = {
bowerDir: 'src/main/html/bower_components',
cssDir: 'src/main/html/css/lib',
fontsDir: 'src/main/html/fonts/lib',
imgDir: 'src/main/html/img/lib',
jsDir: 'src/main/html/js/lib',
deployDir: 'src/main/resources/html'
};
gulp.task('default', ['clean', 'bowerdeps', 'dev']);
gulp.task('clean', function() {
return del([
config.cssDir,
config.fontsDir,
config.jsDir,
config.deployDir
]);
});
gulp.task('dev', function() {
return gulp
.src(['src/main/html/**', '!src/main/html/{bower_components,bower_components/**}'])
.pipe(gulp.dest(config.deployDir));
});
gulp.task('bowerdeps', function() {
var mainFiles = mainBowerFiles();
if(!mainFiles.length) return; // No files found
var jsFilter = filterByRegex('.js$');
var cssFilter = filterByRegex('.css$');
var fontFilter = filterByRegex('.eot$|.svg$|.ttf$|.woff$');
return gulp
.src(mainFiles)
.pipe(jsFilter)
.pipe(gulp.dest(config.jsDir))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(gulp.dest(config.cssDir))
.pipe(cssFilter.restore())
.pipe(fontFilter)
.pipe(gulp.dest(config.fontsDir));
});
// Utility Functions
var filterByRegex = function(regex){
return filter(function(file){
return file.path.match(new RegExp(regex));
});
};
Dependencies run always parallel: ['clean', 'bowerdeps', 'dev'].
https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md
You can use run-sequence for sequencing tasks.
Other thing: del doesn't return a stream. Use callback instead:
gulp.task('clean', function(cb) {
del([
config.cssDir,
config.fontsDir,
config.jsDir,
config.deployDir
], cb);
});
what's wrong with this code:
var gulp = require('gulp');
var watch = require('gulp-watch');
var connect = require('gulp-connect');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
//lint
module.exports = gulp.task('lint', function () {
return gulp.src([config.paths.src.scripts,config.paths.exclude.bower])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
//watch
module.exports = gulp.task('watch', function () {
watch(config.paths.src.scripts, ['lint'])
.pipe(connect.reload());
watch(config.paths.src.templates, ['templates'])
.pipe(connect.reload());
watch(config.paths.src.index)
.pipe(connect.reload());
});
when ie I edit a js file doing an error
jshint show me nothing.
This works:
watch(config.paths.src.scripts)
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(connect.reload());
but it's quite the same or not ?
gulp-watch does not support an array of task names like the internal gulp.watch. See documentation at https://www.npmjs.org/package/gulp-watch
You have to provide gulp-watch a function, something like
watch(config.paths.src.scripts, function(events, done) {
gulp.start(['lint'], done);
}
Note: It seems that gulp.start will be deprecated in Gulp 4.x, it will be replaced by a task runner called bach: https://github.com/floatdrop/gulp-watch/issues/92