Gulp Browserify ReferenceError: source is not defined - javascript

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');

Related

Gulp error: Task function must be specified

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

Gulp Task completes with no error but no file is saved to destination

i am stuck in a kind of a trivial issue and can not get a hang of it.
here is the scenario:
I am using Gulp Task to convert my html templates to javascript using gulp-html2js My environment is Node v6.9.1, gulp 3.9.1, Windows 7
here is the gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var html2js = require('gulp-html2js');
var sourceDir = "D:\Programs_Insalled\nodejs\nodeapps\myApp"
gulp.task('templates', function() {
return gulp.src( 'D:\Programs_Insalled\nodejs\nodeapps\myApp\templates\*.html').
pipe(html2js({outputModuleName: 'templates'})).
pipe(concat('templates.js')).
pipe(gulp.dest('D:\Programs_Insalled\nodejs\nodeapps\myApp\bin'));
});
when i run the task, it completes, in a few m-sec but templates.js is not generated in bin directory
D:\Programs_Insalled\nodejs\nodeapps\myApp>gulp templates
[15:28:45] Using gulpfile D:\Programs_Insalled\nodejs\nodeapps\myApp\gulpfile.js
[15:28:45] Starting 'templates'...
[15:28:45] Finished 'templates' after 19 ms
I have tried below suggestions in similar items listed on GitHub and stackoverflow but have not been successful,
https://github.com/yeoman/generator-webapp/issues/182
https://github.com/yeoman/generator-webapp/issues/225
Can someone help out to find my mistake.
Thanks.
EDIT output of provided examples:
D:\Programs_Insalled\nodejs\nodeapps\myApp>gulp models
[17:13:10] Using gulpfile D:\Programs_Insalled\nodejs\nodeapps\myApp\gulpfile.js
[17:13:10] Starting 'models'...
[17:13:10] Finished 'models' after 21 ms
D:\Programs_Insalled\nodejs\nodeapps\myApp>gulp templates
[17:13:13] Using gulpfile D:\Programs_Insalled\nodejs\nodeapps\myApp\gulpfile.js
[17:13:13] Starting 'templates'...
D:\Programs_Insalled\nodejs\nodeapps\myApp\node_modules\vinyl\index.js:120
if (!this.path) throw new Error('No path specified! Can not get relative.');
^
Error: No path specified! Can not get relative.
at File.get (D:\Programs_Insalled\nodejs\nodeapps\myApp\node_modules\vinyl\index.js:120:27)
at DestroyableTransform.bufferContents [as _transform] (D:\Programs_Insalled\nodejs\nodeapps\myA
pp\node_modules\gulp-concat\index.js:70:20)
at DestroyableTransform.Transform._read (D:\Programs_Insalled\nodejs\nodeapps\myApp\node_modules
\gulp-concat\node_modules\readable-stream\lib\_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (D:\Programs_Insalled\nodejs\nodeapps\myApp\node_module
s\gulp-concat\node_modules\readable-stream\lib\_stream_transform.js:172:12)
at doWrite (D:\Programs_Insalled\nodejs\nodeapps\myApp\node_modules\gulp-concat\node_modules\rea
dable-stream\lib\_stream_writable.js:237:10)
at writeOrBuffer (D:\Programs_Insalled\nodejs\nodeapps\myApp\node_modules\gulp-concat\node_modul
es\readable-stream\lib\_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (D:\Programs_Insalled\nodejs\nodeapps\myApp\node_modules\
gulp-concat\node_modules\readable-stream\lib\_stream_writable.js:194:11)
at DestroyableTransform.ondata (D:\Programs_Insalled\nodejs\nodeapps\myApp\node_modules\through2
\node_modules\readable-stream\lib\_stream_readable.js:531:20)
at emitOne (events.js:96:13)
at DestroyableTransform.emit (events.js:188:7)
D:\Programs_Insalled\nodejs\nodeapps\myApp>
. for pipe is better before pipe, I give you an e.g of one of my gulpile and you not need to put absolute machine path in dest your gulpfile is a root path of task gulp work with js use js path try this
Inever use html2js I dont know if you syntax is correct but first try with this path
my e.g
gulp.task('models', function(){
return gulp.src('models/*.*')
.pipe(gulp.dest('../dist/models'))
});
try that for you
gulp.task('templates', function() {
return gulp.src( 'templates/*.html')
.pipe(html2js({outputModuleName: 'templates'}))
.pipe(concat('templates.js'))
.pipe(gulp.dest('bin'))
});
So, i have finally worked out the solution, Alhamdolilah
Issue was not with gulp task, or html2js, real issue was with gulp-concat
and i have realized that it is not needed as output is already concatenated by html2js
here is improved code:
gulp.task('templates', function () {
gulp.src('templates/*.html')
.pipe(html2js('templates.js', {
outputModuleName: 'templates',
name: 'templates'
}))
.pipe(gulp.dest('bin/'));
});

using series and parallel tasks in gulp 4.0

I am trying to manipulate text before a file is sent to browserify, and I am attempting to use gulp.series to do this. Here's how:
gulp.task('dev_urls', function() {
gulp.src([ 'app/index.js' ])
.pipe(...)
.pipe(gulp.dest(...))
gulp.task('build_dev',
gulp.series('dev_urls', 'browserify', gulp.parallel('copy')))
When I execute the build_dev task using gulp build_dev from the command line, I am given this error:
/usr/local/lib/node_modules/gulp/bin/gulp.js:121
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at /usr/local/lib/node_modules/gulp/bin/gulp.js:121:19
at doNTCallback0 (node.js:407:9)
at process._tickDomainCallback (node.js:377:13)
at Function.Module.runMain (module.js:477:11)
at startup (node.js:117:18)
at node.js:951:3
How can I get this to work?
EDIT:
I am getting that same error with this file:
var gulp = require('gulp');
gulp.task('build_dev', function() {
console.log(1);
})
You need to return from your function.
gulp.task('dev_urls', function() {
return gulp.src([ 'app/index.js' ])
.pipe()
}
Also make sure that gulp is installed correctly.
$ sudo rm /usr/local/bin/gulp
$ sudo rm -rf /usr/local/lib/node_modules/gulp
$ npm uninstall gulp
$ npm install gulpjs/gulp-cli#4.0 -g
# install Gulp 4 into your project
$ npm install gulpjs/gulp.git#4.0 --save-dev

Gulp build formatError - gulp + harpjs + gulp-gh-page + node

I'm working on a project based on :
https://github.com/superhighfives/charliegleason.com
Everything was working so great, and now i have a problem when i try to build the project using gulp build ...
The link to the img of the term error:
http://i.imgur.com/f1kPjLk.png
Error: 1
at formatError (/usr/local/lib/node_modules/gulp/bin/gulp.js:169:10)
at Gulp. (/usr/local/lib/node_modules/gulp/bin/gulp.js:195:15)
at Gulp.emit (events.js:107:17)
at Gulp.Orchestrator._emitTaskDone (/Users/qvoiriot/Documents/qvoiriot.github.io/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
at /Users/qvoiriot/Documents/qvoiriot.github.io/node_modules/gulp/node_modules/orchestrator/index.js:275:23
at finish (/Users/qvoiriot/Documents/qvoiriot.github.io/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at ChildProcess.cb (/Users/qvoiriot/Documents/qvoiriot.github.io/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
at ChildProcess.emit (events.js:129:20)
at maybeClose (child_process.js:1015:16)
at Socket. (child_process.js:1183:11)
at Socket.emit (events.js:107:17)
at Pipe.close (net.js:485:12)
The build process is the same that you can see in the link below. For the build part :
gulp.task('build', function (done) {
cp.exec('harp compile . dist', {stdio: 'inherit'})
.on('close', done)
});
If anybody have an idea about the way i can fix this ... ???
Thanks,
Q
I ran into the same error with a Gulp/Harp setup after installing nvm. I fixed it by re-installing Harp.js globally.
npm install -g harp

Watchify with gulp is not working

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.

Categories

Resources