I have a pretty simple gulp file with a couple tasks:
- Clean a folder
- Copy files
I have a watch setup. I keep getting an error:
events.js:85
throw er; // Unhandled 'error' event
^
Error: ENOENT, open '/Users/gordon/Dropbox/Dev/MDR/ScribeTab/dist/font/Roboto-Regular-webfont.woff'
I don't understand whats wrong, like I said sometimes it works when I run the watch, sometimes it fails on the watch, sometimes it fails when the watch task (default) is ran after I make a change to popup.html.
Here is my complete gulpfile:
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
path = require('path'),
del = require('del')
gulp.task('default', ['clean', 'copy'])
gulp.task('clean', function(){
return del('dist/**/*');
});
gulp.task('copy', function() {
/* copy fonts */
var fonts = gulp.src('src/font/*')
.pipe(gulp.dest("dist/font"));
/* copy images */
var imgs = gulp.src('src/img/*')
.pipe(gulp.dest("dist/img"));
/* copy html files */
var html = gulp.src('src/**/*.html')
.pipe(gulp.dest("dist"));
/* copy manifest file for google chrome */
var manifest = gulp.src('src/manifest.json')
.pipe(gulp.dest('dist'));
});
// watch
gulp.task('watch', ['default'], function () {
gulp.watch(['src/popup.html'], ['default']);
});
Sounds like something may be running out of order, perhaps try copy first then clean
Also try adding this error logging function:
function errorlog(err) {
console.log(err.message);
this.emit('end');
}
gulp.task('clean', function() {
return del('dist/**/*')
.on('error', errorlog);
});
Related
I have a problem with the linting and live reloading in my gulp file. They take to much time to finish.
Here is my gulp file, what do I do wrong :
'use strict';
console.time("Loading plugins"); //start measuring
var gulp = require('gulp');
var connect = require('gulp-connect');
var open = require('gulp-open');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var babelify = require('babelify');
var sass = require('gulp-sass');
var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle
var lint = require("gulp-eslint");
var config = {
port: 8001,
devBaseUrl: 'http://localhost',
paths: {
html: "./src/*.html",
externals: "./src/assets/externals/*.js",
js: "./src/**/*.js",
images: './src/assets/images/**/*',
fonts: './src/assets/css/fonts/*',
css: [
"./src/assets/css/*",
],
sass: './src/assets/css/*.scss',
dist: "./dist",
mainJS: "./src/main.js"
}
};
gulp.task('connect', ['watch'], function () {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true,
fallback: './dist/index.html'
})
});
gulp.task('open', ['connect'], function () {
gulp.src('dist/index.html')
.pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"}));
});
gulp.task('html', function () {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('externals', function () {
gulp.src(config.paths.externals)
.on('error', console.error.bind(console))
.pipe(concat('external.js'))
.pipe(gulp.dest(config.paths.dist + '/externals'))
.pipe(connect.reload());
});
gulp.task('js', function () {
browserify(config.paths.mainJS)
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('images', function () {
gulp.src(config.paths.images)
.pipe(gulp.dest(config.paths.dist + '/images'));
});
gulp.task('styles', function () {
gulp.src(config.paths.css)
.pipe(sass())
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'))
.pipe(connect.reload());
});
gulp.task('fonts', function () {
gulp.src(config.paths.fonts)
.pipe(gulp.dest(config.paths.dist + '/css/fonts'));
});
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint())
.pipe(lint.format());
});
gulp.task('watch', function () {
gulp.watch(config.paths.js, ['js', 'lint']);
gulp.watch(config.paths.css, ['styles']);
});
console.timeEnd('Loading plugins');
gulp.task('default', ['js', 'styles', 'lint', 'open', 'watch']);
The lint takes almost 20s to finish and liverolading takes 5-6s to refresh the browser after I make some changes.
Any advice?
Gulp ESLint plugin is generally very slow. I compared it to Grunt at some point (a while back) and it was about 5-10 times slower. Don't know why.
Make sure you are running latest version of ESLint and also that you don't have node_modules directory under your src folder. If you do, you can run eslint with --debug flag to make sure that ESLint is not linting files in your node_modules directory. If for some reason it does, add .eslintignore file and specify everything that you don't want to lint there.
In general, if you want instant feedback while coding, I would suggest looking into editor integrations. Pretty much every editor out there has ESLint plugin at this point. They show you errors directly in the window you are writing your code in.
We've recently come across the same issue on my team. The best workaround was to run ESLint only on the modified files, instead of all js files.
We use nodemon to watch for changed files, though gulp-watch has the same idea.
See the change event on gulp-watch.
Then you'd just run a lint function on the changed file.
You may need to resolve the relative file path.
gulp.watch(config.paths.js, ['js'])
.on('change', lintFile);
const lintFile = (file) => {
return gulp.src(file)
.pipe(eslint());
};
Is it necessary to check you code while developing?
We use another approach:
1)Do not check code while developing, because it is long, also it sometimes doesn't allow to create "fast" mock for something while debugging.
2)Check style only before commit. If something is wrong, fix style and check everything works. Also CI system could control your commits.
So, my suggestion is to remove lint from watch task.
I am working on my Gulp tutorial(using this site: http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx).
Here is gulpFile.js:
// include plug-ins
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var config = {
//Include all js files but exclude any min.js files
src: ['app/**/*.js', '!app/**/*.min.js']
}
//delete the output file(s)
gulp.task('clean', function () {
//del is an async function and not a gulp plugin (just standard nodejs)
//It returns a promise, so make sure you return that from this task function
// so gulp knows when the delete is complete
return del(['app/all.min.js']);
});
// Combine and minify all files from the app folder
// This tasks depends on the clean task which means gulp will ensure that the
// Clean task is completed before running the scripts task.
gulp.task('scripts', ['clean'], function () {
return gulp.src(config.src)
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('app/'));
});
gulp.task('watch', function () {
return gulp.watch(config.src, ['scripts']);
});
//Set a default tasks
gulp.task('default', ['scripts'], function () { });
Here is task runner explorer:
And here how task runner explorer looks in tutorial site above:
Any idea why I dont see subTasks in my task runner explorer?
This is the only way so far that I've been able to fix this.
After adding a task, rename your gulpfile to something else and then close Task Runner Explorer.
Change the renamed file back to gulpfile.js, then reopen Task Runner Explorer.
You should see your gulpfile tasks updated.
I have the following gulp file:
var paths = {
all: ['*.js', '**/*.js', 'index.html'],
js: ['*.js', '**/*.js'],
html: 'index.html',
dist: 'dist'
};
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
gulp.src(paths.html)
.pipe(gulp.dest(paths.dist));
return gulp.src(paths.js)
.pipe(babel())
.pipe(gulp.dest(paths.dist));
});
gulp.task('watch', function(){
gulp.watch(paths.all, ['default']);
});
When I run it, I get this error
SyntaxError: d:/project_folder/node_modules/gulp-babel/node_modules/gulp-util/node_modules/beeper/index.js: 'return' outside of function (9:1) ...`
I read somewhere that I shouldn't compile dependencies. I run just gulp with no following flags. So I don't know wehether or not I do compile them. But gulp seems slow because it takes few seconds to get to first task. How to get rid of this error? And am I doing something wrong with dependencies?
Yes, you are currently including all .js files from the current directory, not the source directories. Your application code (lets assume app.js) will "include" your dependencies by using common js requires, such as:
var request = require('request');
In order to actually map the require statements you would want to use a module loader, or packer such as: Browserify or Webpack
The following gulp task will solve the module errors:
var paths = {
all: ['./src**/*.js', 'index.html'],
js: ['./src/**/*.js'],
html: 'index.html',
dist: 'dist'
};
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('default', function () {
gulp.src(paths.html)
.pipe(gulp.dest(paths.dist));
return gulp.src(paths.js)
.pipe(babel())
.pipe(gulp.dest(paths.dist));
});
gulp.task('watch', function(){
gulp.watch(paths.all, ['default']);
});
This only includes all the .js files in the src folder, not **/*.js which will include all *.js files in every folder including node_modules bower_components.
Regarding module loading:
You would probably want to use a loader task to bundle all your client code instead of just copying them to the dist, such as:
gulp.task("webpack", function(callback) {
// run webpack
webpack({
// configuration
}, function(err, stats) {
if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({
// output options
}));
callback();
});
});
I have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.
Just wondering if someone can help me with my Gulp setup. At the moment I am using gulp-sass and gulp-scss-lint with a watch task. What I want to happen is that when an scss file is saved for the linting task to run completely and if any errors or warnings are thrown up for the scss files not to compile and for watch to continue running.
At the moment I seem to have this working with errors but not with the warnings, which still compile the stylesheets.
/// <binding ProjectOpened='serve' />
// Macmillan Volunteering Village Gulp file.
// This is used to automate the minification
// of stylesheets and javascript files. Run using either
// 'gulp', 'gulp watch' or 'gulp serve' from a command line terminal.
//
// Contents
// --------
// 1. Includes and Requirements
// 2. SASS Automation
// 3. Live Serve
// 4. Watch Tasks
// 5. Build Task
'use strict';
//
// 1. Includes and Requirements
// ----------------------------
// Set the plugin requirements
// for Gulp to function correctly.
var gulp = require('gulp'),
notify = require("gulp-notify"),
sass = require('gulp-sass'),
scssLint = require('gulp-scss-lint'),
gls = require('gulp-live-server'),
// Set the default folder structure
// variables
styleSheets = 'Stylesheets/',
styleSheetsDist = 'Content/css/',
html = 'FrontEnd/';
//
// 2. SASS Automation
// ------------------
// Includes the minification of SASS
// stylesheets. Output will be compressed.
gulp.task('sass', ['scss-lint'], function () {
gulp.src(styleSheets + 'styles.scss')
.pipe(sass({
outputStyle: 'compressed'
}))
.on("error", notify.onError(function (error) {
return error.message;
}))
.pipe(gulp.dest(styleSheetsDist))
.pipe(notify({ message: "Stylesheets Compiled", title: "Stylesheets" }))
});
// SCSS Linting. Ignores the reset file
gulp.task('scss-lint', function () {
gulp.src([styleSheets + '**/*.scss', '!' + styleSheets + '**/_reset.scss'])
.pipe(scssLint({
'endless': true
}))
.on("error", notify.onError(function (error) {
return error.message;
}))
});
//
// 3. Live Serve
// -------------
gulp.task('server', function () {
var server = gls.static('/');
server.start();
// Browser Refresh
gulp.watch([styleSheets + '**/*.scss', html + '**/*.html'], function () {
server.notify.apply(server, arguments);
});
});
// Task to start the server, followed by watch
gulp.task('serve', ['default', 'server', 'watch']);
//
// 4. Watch Tasks
// --------------
gulp.task('watch', function () {
// Stylesheets Watch
gulp.watch(styleSheets + '**/*.scss', ['scss-lint', 'sass']);
});
//
// 5. Build Task
// --------------
gulp.task('default', ['sass']);
Seems that #juanfran has answered this question on GitHub in 2015. I will just repost it here.
1) Using gulp-if you can add any condition you like.
var sass = require('gulp-sass');
var gulpif = require('gulp-if');
var scssLint = require('gulp-scss-lint')
gulp.task('lint', function() {
var condition = function(file) {
return !(file.scssLint.errors || file.scssLint.warnings);
};
return gulp.src('**/*.scss')
.pipe(scssLint())
.pipe(gulpif(condition, sass()));
});
2) Another more specific option is to use Fail reporter that will fail in case of any errors or warnings
gulp.task('scss-lint', function() {
return gulp.src('**/*.scss')
.pipe(scssLint())
.pipe(scssLint.failReporter());
});
gulp.task('sass', ['scss-lint'], function() {
return gulp.src('**/*.scss')
.pipe(scss());
});