I'm having a problem setting up a basic Gulpfile.
My JS task does not work. I get this error:
Error: ENOENT, no such file or directory
at Function.startup.resolveArgv0 (node.js:815:23)
at startup (node.js:58:13)
at node.js:906:3
What am I missing? I've tried setting the destination to various folders with no luck. Thanks in advance.
var gulp = require("gulp");
var to5 = require("gulp-6to5");
var concat = require("gulp-concat");
var sourcemaps = require("gulp-sourcemaps");
var sass = require("gulp-ruby-sass");
var uglify = require("gulp-uglify");
var prefix = require("gulp-autoprefixer");
var watcher = gulp.watch(["./site/css/*.scss"], ["sass"]);
gulp.task("sass", function(){
return sass("./site/css/", { sourcemap: true, style: 'compressed' })
.on("error", function(err){
console.error(err.message);
})
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./site/css/"))
});
gulp.task("js", function(){
return gulp.src("./site/js/*.js")
.pipe(to5())
.pipe(concat("app.js"))
.pipe(gulp.dest("."));
});
gulp.task("watch");
gulp.task("default", ["sass"]);
Related
Following is the code I inherited for gulp and browserify
'use strict';
var gulp = require('gulp'),
browserify = require('browserify'),
glob = require('glob'),
path = require('path'),
source = require('vinyl-source-stream'),
notifier = require('node-notifier'),
_ = require('underscore'),
watchify = require('watchify'),
jshint = require('gulp-jshint'),
chalk = require('chalk'),
del = require('del'),
webserver = require('gulp-webserver'),
cleanCSS = require('gulp-clean-css'),
babelify = require("babelify"),
jasmine = require('gulp-jasmine');
var browserifyables = './web-app/**/*-browserify.js';
function logError(error){
/* jshint validthis: true */
notifier.notify({
title: 'Browserify compilation error',
message: error.toString()
});
console.error(chalk.red(error.toString()));
this.emit('end');
}
function bundleShare(b, config) {
b.bundle()
.on('error', logError)
.pipe(source(config.destFilename))
.pipe(gulp.dest(config.destDir));
}
function browserifyShare(config, watch) {
var browserifyConfig = {
cache: {},
packageCache: {},
fullPaths: true,
insertGlobals: true
};
if(process.env.NODE_ENV !== 'production'){
browserifyConfig.debug = true;
}
var b = browserify(browserifyConfig);
b.transform('browserify-css', {});
b.transform(babelify, {presets: ["es2015"]});
// Need to fix dollar sign getting effed in angular when it gets minified before we can enable
if(process.env.NODE_ENV === 'production'){
b.transform('uglifyify', {global: true});
}
if(watch) {
// if watch is enable, wrap this bundle inside watchify
b = watchify(b);
b.on('update', function(ids) {
ids.forEach(function(id){
console.log(chalk.green(id + ' finished compiling'));
});
bundleShare(b, config);
});
b.on('log', function(message){
console.log(chalk.magenta(message));
});
}
// source to watch
b.add(config.sourceFile);
bundleShare(b, config);
}
gulp.task('minify-css', function() {
var minifyConfig = {compatibility: 'ie8'};
if(process.env.NODE_ENV !== 'production'){
minifyConfig.debug = true;
}
return gulp.src('./web-app/css/*/*.css')
.pipe(cleanCSS(minifyConfig))
.pipe(gulp.dest('./web-app/css'))
;
});
gulp.task('browserify', ['minify-css'], function(){
glob(browserifyables, {}, function(err, files){
_.each(files, function(file){
browserifyShare({
sourceFile: file,
destDir: path.dirname(file),
destFilename: path.basename(file).replace('-browserify', '')
});
});
});
});
I run the gulp task using
NODE_ENV='production' gulp browserify
The gulp tasks complete but does not terminate. The following is the output
[22:40:57] Using gulpfile ~/some/dir/Gulpfile.js
[22:40:57] Starting 'minify-css'...
[22:40:58] Finished 'minify-css' after 565 ms
[22:40:58] Starting 'browserify'...
[22:40:58] Finished 'browserify' after 2.12 ms
This slows down my build on jenkins considerably.
However if i comment out this line:
b.add(config.sourceFile);
The tasks exit but then it does not work ( for obvious reasons ).
So not sure what I am missing here. I need to figure out what prevents the task from exiting.
I am writing a gulp task to browserify, compile my less files into css and to run a gulp-webserver. On Client side I am using React 0.14. The moment any error is found in browserify, my gulp watch crashes. Every time I have to stop the watch task and run it again. How to avoid this? I mean if an error is found and if i fix the error, how can i again run the browserify task without my watch getting crashed. If I get an error in browserify like: the closing JSX tag missing...and Once I fix the error, how to stop my watch from crashing.
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require("babelify");
var source = require('vinyl-source-stream');
var plugins = require('gulp-load-plugins')();
var runSequence = require('run-sequence');
var watchLess = require('gulp-watch-less');
var domain = require("domain");
gulp.task('webserver', function(){
gulp.src('./')
.pipe(plugins.webserver({
fallback : 'index.html',
host : 'localhost',
livereload : {
enable : true
},
open : true
}))
})
gulp.task('browserify', function(){
console.log('Browserifying ...');
return browserify({
entries : ['./js/index.js'],
debug : true
})
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.on('error', function(err) {
console.log('Error:', err);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'))
})
gulp.task('build-css', function(){
return gulp.src('./less/**/*.less')
.pipe(plugins.less())
.pipe(gulp.dest('./css'))
})
gulp.task('build', function() {
runSequence(
['build-css'], ['browserify'], ['webserver'], ['watch']
);
});
gulp.task('watch', function(){
gulp.watch('./js/*.js',['browserify'])
gulp.watch('./less/**/*.less',['build-css'])
gulp.watch('./css/**/*.css')
})
add this in your error handling method:
this.emit('end')
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);
});
I'm trying to use gulp-data with gulp-jade in my workflow but I'm getting an error related to the gulp-data plugin.
Here is my gulpfile.js
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
jade = require('gulp-jade'),
data = require('gulp-data'),
path = require('path'),
sass = require('gulp-ruby-sass'),
prefix = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
process = require('child_process');
gulp.task('default', ['browser-sync', 'watch']);
// Watch task
gulp.task('watch', function() {
gulp.watch('*.jade', ['jade']);
gulp.watch('public/css/**/*.scss', ['sass']);
gulp.watch('public/js/*.js', ['js']);
});
var getJsonData = function(file, cb) {
var jsonPath = './data/' + path.basename(file.path) + '.json';
cb(require(jsonPath))
};
// Jade task
gulp.task('jade', function() {
return gulp.src('*.jade')
.pipe(plumber())
.pipe(data(getJsonData))
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('Build/'))
.pipe(browserSync.reload({stream:true}));
});
...
// Browser-sync task
gulp.task('browser-sync', ['jade', 'sass', 'js'], function() {
return browserSync.init(null, {
server: {
baseDir: 'Build'
}
});
});
And this is a basic json file, named index.jade.json
{
"title": "This is my website"
}
The error I get is:
Error in plugin 'gulp-data'
[object Object]
You are getting error because in getJsonData you pass required data as first argument to the callback. That is reserved for possible errors.
In your case the callback isn't needed. Looking at gulp-data usage example this should work:
.pipe(data(function(file) {
return require('./data/' + path.basename(file.path) + '.json');
}))
Full example:
var gulp = require('gulp');
var jade = require('gulp-jade');
var data = require('gulp-data');
var path = require('path');
var fs = require('fs');
gulp.task('jade', function() {
return gulp.src('*.jade')
.pipe(data(function(file) {
return require('./data/' + path.basename(file.path) + '.json');
}))
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('build/'));
});
Use this if you're running the task on gulp.watch:
.pipe(data(function(file) {
return JSON.parse(fs.readFileSync('./data/' + path.basename(file.path) + '.json'));
}))
The following gulp.js file runs without error but does not output a bundle.js - at command line we run node gulp.js the console.log msgs inside task do not show but the others do thks for any help
var gulp = require("gulp");
var browserify = require("browserify");
var reactify = require("reactify");
var source = require("vinyl-source-stream");
console.log("read in requires");
gulp.task("scripts", function() {
console.log("task");
var bundler = browserify ({
entries: ["./app.js"],
transform: [reactify],
debug: true
});
var bundle = function() {
console.log("bundle");
return bundler
.bundle()
.pipe(source("bundle.js"))
.pipe(buffer())
.pipe(gulp.dest("./build"));
};
return bundle();
});
console.log("done");