I have created this gulp task for watchifying but it gives this error: Cannot read property 'cache' of undefined
gulp.task('browserify-With-Watch', function () {
"use strict";
var bundler = browserify({
entries: ['src/js/ede-wrapper.js'], // Only need initial file, browserify finds the deps
debug: true, // Gives us sourcemapping
cache: {},
packageCache: {},
fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('src/js/ede-wrapper.js'))
// This is where you add uglifying etc.
.pipe(gulp.dest('dist'));
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('src/js/ede-wrapper.js'))
.pipe(gulp.dest('dist'));
});
This is the error i get
[17:06:04] Starting 'browserify-With-Watch'...
[17:06:04] 'browserify-With-Watch' errored after 1.6 ms
[17:06:04] TypeError: Cannot read property 'cache' of undefined
at watchify (d:\KHOBI\Source\ede_js_sdk\node_modules\watchify\index.js:13:27)
at Gulp.<anonymous> (d:\KHOBI\Source\ede_js_sdk\gulpfile.js:55:20)
at module.exports (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\hasithm\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
Hope this is not something wrong with the watchify version that I use
Note: I have used gulp-browserify to browserify
Note: I have used gulp-browserify to browserify
You should use browserify directly here, not gulp-browserify.
watchify expects a browserify instance but you're giving it a stream created by gulp-browserify.
Related
This is my first time using Gulp, I am trying to make a gulpfile to minify and merge css and js files, but I have this error when I run the command gulp:
C:\Users\S.Hocine\Desktop\gulpTest>gulp
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\S.Hocine\Desktop\gulpTest\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\S.Hocine\Desktop\gulpTest\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (C:\Users\S.Hocine\Desktop\gulpTest\gulpfile.js:36:6)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at requireOrImport (C:\Users\S.Hocine\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
my gulpfile:
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
// minify and copy html
gulp.task('minifyHtml', function(){
gulp.src('src/*.html')
.pipe(uglify())
.pipe(gulp.dest('dest'));
});
// minify and merge css
gulp.task('minifyMergeCss', function(){
gulp.src('src/css/*.css')
.pipe(concat('merged-min.css'))
.pipe(uglify())
.pipe(gulp.dest('dest/css'));
});
// minify and merge js
gulp.task('minifyMergeJs', function(){
gulp.src('src/js/*.js')
.pipe(concat('merged-min.js'))
.pipe(uglify())
.pipe(gulp.dest('dest/js'));
});
gulp.task('default', ['minifyHtml', 'minifyMergeCss', 'minifyMergeJs']);
gulp.task('watch', function(){
gulp.watch('src/*.html', ['minifyHtml']);
gulp.watch('src/css/*.css', ['minifyMergeCss']);
gulp.watch('src/js/*.js', ['minifyMergeJs']);
});
my gulp version:
CLI version: 2.3.0
Local version: 4.0.2
Where is the problem ?
If you uses the gulp version V3 that contain the different syntax use the latest version of gulp, and also for gulp task modules that you are using into latest version if that doesn't work too use this way,
An example of your function it must be,
gulp.task('default', gulp.series('minifyHtml', 'minifyMergeCss', 'minifyMergeJs'));
Now that'll work fine. This happens because of in gulp v4 the list parameter has been deprecated.
see the more robust example in the gulp documentation for running tasks in series
or you can see the documentation npm
I'm trying to use two configurations with webpack, but it fails in any way that I try, I allways get this message:
TypeError: Cannot read property 'tap' of undefined
In the docs, it says that it is supported, even with an array of functions:
Instead of exporting a single configuration object/function, you may export multiple configurations (multiple functions are supported since webpack 3.1.0). When running webpack, all configurations are built.
I'm using webpack#4.31.0 and webpack-cli#3.3.2.
This is the error:
$ webpack --info-verbosity verbose
C:\Users\...\node_modules\webpack-cli\bin\cli.js:281
compiler.hooks.beforeRun.tap("WebpackInfo", compilation => {
^
TypeError: Cannot read property 'tap' of undefined
at processOptions (C:\Users\...\node_modules\webpack-cli\bin\cli.js:281:31)
at yargs.parse (C:\Users\...\node_modules\webpack-cli\bin\cli.js:373:3)
at Object.parse (C:\Users\...\node_modules\yargs\yargs.js:567:18)
at C:\Users\...\node_modules\webpack-cli\bin\cli.js:49:8
at Object.<anonymous> (C:\Users\...\node_modules\webpack-cli\bin\cli.js:375:3)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
...
And this is my code (full code here):
// #ts-check
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = [clientConfig, serverConfig]; // Error: Array of functions that returns the object fails
//module.exports = env => [clientConfig(env), serverConfig(env)]; // Error: Function that return an array of objects fails
//module.exports = [clientConfig(), serverConfig()]; // Error: Array of objects fails
//module.exports = clientConfig; // OK: The first function alone works
//module.exports = serverConfig; // OK: The other function alone works
function serverConfig(env) {
return {
target: 'node',
// ...
};
}
function clientConfig(env) {
return {
target: 'web',
//...
};
}
Full code here.
Update:
Related issue: https://github.com/webpack/webpack-cli/issues/570#issuecomment-499093581
Try to use another version of webpack
"webpack": "4.20.2"
I have seen that there are some people report that that have this issue when they using webpack 4.30 and above
Also try to use HtmlWebPackPlugin that have version above "4.0.0-alpha"
Then delete your package-lock.json and node_modules then run npm i again
Update:
Make sure to run --watch in your command line
I'm getting this odd error as the title.
The full message looks like this
$ gulp browserify [01:21:03] Using gulpfile F:\CSC
Assignments\FinalProject\HotelProject\gulpfile.js [01:21:03] Starting
'browserify'... [01:21:03] 'browserify' errored after 15 ms [01:21:03]
ReferenceError: source is not defined
at Gulp. (F:\CSC Assignments\FinalProject\HotelProject\gulpfile.js:109:15)
at module.exports (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\LUCKYLAM\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
I'm new to this and after having spent a couple of hours figuring out what's causing the problem I have no idea what is wrong around here. Please help.
Here is my /app/js/script.js
require('angular');
var app = angular.module('app', []);
gulpfile.js:
gulp.task('browserify', function() {
return browserify('./app/js/script.js')
.bundle()
.pipe(source('main.js'))
// saves it the public/js/ directory
.pipe(gulp.dest('./dist/js/kk/'));
});
My folder structure
I guess you are missing one npm package: vinyl-source-stream.
Try to install it with npm install vinyl-source-stream --save-dev and require in your gulpfile.js like so:
var source = require('vinyl-source-stream');
I started loving gulp but I've been having too many cryptic errors that are very hard to find and at the end I'm working for my gulpfile.js instead of doing my job.
Anyway, I tried gulp-uncss before, outside gulp-useref and therefore outside gulp-if, but my gulpfile.js ended up too bulky and unreadable. Now it's readable but it doesn't work. Hurray.
var p = require('gulp-load-plugins')();
gulp.task('html', function () {
var assets = p.useref.assets();
gulp.src('*.html')
.pipe(assets)
.pipe(p.if('*.js', p.uglify()))
.pipe(p.if('*.css', p.uncss()))
.pipe(assets.restore())
.pipe(p.useref())
.pipe(gulp.dest(build_folder))
.pipe(p.size());
});
That generates this:
[12:47:53] /long/path/web $ gulp html
[12:48:06] Using gulpfile /long/path/web/gulpfile.js
[12:48:06] Starting 'html'...
[12:48:07] 'html' errored after 507 ms
[12:48:07] TypeError: Cannot set property 'ignoreSheets' of undefined
at Object.module.exports (/long/path/web/node_modules/gulp-uncss/index.js:14:26)
at Gulp.<anonymous> (/long/path/web/gulpfile.js:45:31)
at module.exports (/long/path/web/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/long/path/web/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/long/path/web/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/long/path/web/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
[12:48:12] /long/path/web $
Uncss was crucial to my workflow and I can't crack what's going wrong here. Any clue?
EDIT: This is what's in /long/path/web/node_modules/gulp-uncss/index.js until line 14
'use strict';
var uncss = require('uncss'),
gutil = require('gulp-util'),
assign = require('object-assign'),
transform = require('stream').Transform,
PLUGIN_NAME = 'gulp-uncss';
module.exports = function(options) {
var stream = new transform({ objectMode: true });
// Ignore stylesheets in the HTML files; only use those from the stream
options.ignoreSheets = [/\s*/];
Well, your excerpt of gulp-uncss/index.js states, that it can not handle an undefined options parameter - which it is not in you gulpfile:
.pipe(p.if('*.css',
p.uncss({
html: [ '*.html' ] // html files to check for styles to keep
})
))
The doc also states, that html is an required option attribute: npmjs.com/package/gulp-uncss#html
Type: Array|String Required value.
An array which can contain an array of files relative to your gulpfile.js, and which can also contain URLs. Note that if you are to pass URLs here, then the task will take much longer to complete. If you want to pass some HTML directly into the task instead, you can specify it here as a string.
All the examples I have seen using browserify and gulp assume that you only want to browserify 1 file. This is usually not the case.
I came across an example that used vinyl-transforms, but I am unable to get it to work correctly. Here is the (coffee-script) code:
# Browserify JS
gulp.task 'browserify', [], ->
# Create the transform
br = transform (f) ->
return browserify(f).bundle()
# Run browserify
gulp.src(['./public/js/**/*.js'])
.pipe(br)
.pipe(gulp.dest('.'))
But I get the following error:
[10:50:55] Starting 'browserify'...
events.js:72
throw er; // Unhandled 'error' event
^
Error: write after end
The easiest way would be to use glob directly:
var glob = require('glob');
gulp.task('browserify', function() {
var files = glob.sync('./public/js/**/*.js');
return browserify({entries: files})
.bundle()
.pipe(gulp.dest('.'));
});