Trying to get gulp-mocha to run mocha test on JavaScript files and return the result using nyan cat reporter. When I run the command I get the following error
'mocha' errored after 244 ms
ReferenceError in plugin 'gulp-mocha'
Message:
document is not defined
Here is the task in my Gulpfile.js
var gulp = require('gulp');
var mocha = require ('gulp-mocha');
gulp.task('mocha', function () {
return gulp.src(jsSources, {read: false})
.pipe(mocha({reporter: 'nyan'}));
});
Do I need to install the 'nayn' reporter as a dependency also?
No, you don't need to install it as a dependency. Try this:
var gulp = require('gulp');
var mocha = require('gulp-mocha');
gulp.task('default', function () {
gulp.watch(['./mocha/*'], ['mocha']);
});
gulp.task('mocha', function(){
return gulp.src('./mocha/*', {read: true})
.pipe(mocha({reporter: 'nyan'}));
});
Related
I have created a gulpfile.js file for a project I'm building. When I try to run it, I get this error.
[18:29:03] Using gulpfile ~\Documents\codeprojects\antenna\gulpfile.js
[18:29:03] Starting 'default'...
[18:29:03] Starting 'sass'...
[18:29:03] The following tasks did not complete: default, sass
[18:29:03] Did you forget to signal async completion?
Here is my gulpfile.js code
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('public/stylesheets/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
gulp.task('watch', function() {
gulp.watch('public/stylesheets/*.scss', ['sass']);
});
gulp.task('default', gulp.series('sass', 'watch'));
gulp.task('sass', function() {
return gulp.src('public/stylesheets/style.scss') // return added here
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
// the return above will suffice to "signal async completion"
gulp.task('watch', function() {
// gulp.watch('public/stylesheets/*.scss', ['sass']); // old gulp v3 synatx
gulp.watch('public/stylesheets/*.scss', gulp.series('sass')); // v4 syntax
});
Also, you will want to switch to the plugin gulp-dart-sass instead of gulp-sass. It supports more recent features like #use for example.
I dont know why i am receiving this error AssertionError [ERR_ASSERTION]: Task function must be specified GULP (node js , keystone js ). What causes this error ? anyone can help ?. I am using keystone app and sass compilation?. gulp file that will restart keystonejs app and compile sass. Is this regarding on the gulp version my goal version in my package.json is "gulp": "^4.0.2",.
My Gulp file
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jshintReporter = require('jshint-stylish');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var shell = require('gulp-shell')
var bs = require('browser-sync').create();
var paths = {
'src':['./models/**/*.js','./routes/**/*.js', 'keystone.js', 'package.json'],
'style': {
all: './public/styles/**/*.scss',
output: './public/styles/'
}
};
// gulp lint
gulp.task('lint', function(){
gulp.src(paths.src)
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter));
});
// gulp watcher for lint
gulp.task('watch:lint', function () {
gulp.src(paths.src)
.pipe(watch())
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter));
});
gulp.task('sass', function(){
gulp.src(paths.style.all)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(paths.style.output))
.pipe(bs.stream());
});
gulp.task('watch:sass', function () {
gulp.watch(paths.style.all, ['sass']);
});
gulp.task('browser-sync', function(){
bs.init({
proxy: 'http://localhost:3000',
port: '4000'
});
});
gulp.task('runKeystone', shell.task('node keystone.js'));
gulp.task('watch', ['watch:sass', 'watch:lint']);
gulp.task('default', ['watch', 'runKeystone', 'browser-sync']);
Below is my current Gulpfile.js and when I'm attempting to run gulp minify I'm getting the error, "Task 'minify' is not in your gulpfile". However, I'm able to run gulp sass with no issues. I also have each module installed with npm.
module.exports = function(gulp) {
'use strict'
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('minify', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssnano())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('app/css/min'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'cssnano'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app/'
},
})
})
}
You should not treat the gulpfile.js as a node module and drop the following part
module.exports = function(gulp) {
(don't forget to remove the closing curly (}) at the end of the gulpfile.js)
Then, you should require gulp
var gulp = require('gulp');
That should make it run smoothly.
Why it does run your gulp sass, I don't know. I just created a simple test file in a fresh directory, and it didn't recognise the sass task for me. Maybe you installedgulp, sass or both globally at some point (e.g. earlier project).
I am using babel to transpile my es6 code. I'm also using gulp to do the tasks. My gulpfile.js looks like the following :
var gulp = require('gulp'),
es6Path = './src/*.js',
browserify = 'browserify',
babelify = require('babelify'),
source = require('vinyl-source-stream');
gulp.task('build', function () {
return browserify({entries: './src/script.js', extensions: ['.js'], debug: true})
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('watch', ['build'], function () {
gulp.watch(es6Path, ['build']);
});
gulp.task('default', ['watch']);
But when I try to run gulp , I get this error :
Starting 'build'...
'build' errored after 100 μs
TypeError: string is not a function
Any idea why this happens ?
You set browserify to string 'browserify' then try to call it as a function. You need to require('browserify').
Is there a way to specify a gulp task depending on the NODE_ENV that is set?
For example in my package.json file, I have something like:
"scripts": {
"start": "gulp"
}
And I have multiple gulp tasks
gulp.task('development', function () {
// run dev related tasks like watch
});
gulp.task('production', function () {
// run prod related tasks
});
If I set NODE_ENV=production npm start, can I specify to only run gulp production? Or is there a better way to do this?
Using a single ternary in your default gulp task, you can have something like:
gulp.task('default',
[process.env.NODE_ENV === 'production' ? 'production' : 'development']
);
You will then be able to keep the single gulp command in your package.json and using this like you said:
NODE_ENV=production npm start
Any other value of your NODE_ENV variable will launch the development task.
You could of course do an advanced usage using an object allowing for multiple tasks and avoiding if trees hell:
var tasks = {
development: 'development',
production: ['git', 'build', 'publish'],
preprod: ['build:preprod', 'publish:preprod'],
...
}
gulp.task('default', tasks[process.env.NODE_ENV] || 'fallback')
Keep in mind that when giving an array of tasks, they will be run in parallel.
Have your first gulp task run other gulp tasks based on the process.env.NODE_ENV value.
gulp.task('launcher', function(){
switch (process.env.NODE_ENV){
case 'development':
// Run dev tasks from here
break;
case 'production':
// Run prod tasks
break;
}
});
The other simple way could be
gulp.task('set-dev-env', function () {
return process.env.NODE_ENV = 'development';
});
gulp.task('set-prod-env', function () {
return process.env.NODE_ENV = 'production';
});
gulp.task('development', ['set-dev-env'], function () {
// your code
});
gulp.task('production', ['set-prod-env'], function () {
// your code
});
Run gulp production or gulp development.
You can also use gulp-mode plugin.
Usage:
var gulp = require('gulp');
var mode = require('gulp-mode')();
var uglify = require('gulp-uglify');
gulp.task('default', function() {
gulp.src('src/*.js')
.pipe(mode.production(uglify()))
.pipe(gulp.dest('dist'));
});
OR
var isProduction = mode.production();
if (isProduction) {
console.log("Production mode");
}
Start build as:
gulp build --production
For "npm run-script" use-cases:
package.json :-
"scripts": {
"devbld": "gulp build --development",
"prodbld": "gulp build --production",
}
$ npm run devbld
$ npm run prodbld
if (process.env.NODE_ENV === "production")
// whatever