I'm new to both Gulp and Browserify and I'm working on a Typescript project. Everything worked
fine till I imported rxjs but since then I'm facing with the following error message:
d:\Work\rxjsnew\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:523
dest.end();
^
TypeError: dest.end is not a function
at DestroyableTransform.onend (d:\Work\rxjsnew\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:523:10)
at DestroyableTransform.g (events.js:260:16)
at emitNone (events.js:72:20)
at DestroyableTransform.emit (events.js:166:7)
at d:\Work\rxjsnew\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:965:16
at nextTickCallbackWith0Args (node.js:419:9)
at process._tickCallback (node.js:348:13)
If I remove the rxjs import, the project is compiled successfully.
This is my gulpfile:
var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
gulp.task('scripts', function () {
return gulp.src('js/*.js')
.pipe(browserify().on('error', function(e){
console.log(e);
}));
});
gulp.task("default", ["scripts"], function () {
return browserify({
basedir: '.',
debug: true,
entries: ['src/main.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest("dist"))
});
Installing '#reactivex/rxjs' package and importing Rx the following way solved the issue.
import { Observable } from '#reactivex/rxjs';
Related
I'm trying to run sever and I get this assertion error. I've uninstalled node and NPM and reinstalled again also I tried many steps and suggested solutions here but it doesn't fit with my problem.
AssertionError [ERR_ASSERTION]: Task never defined: node_modules/scss/bootstrap.scss
at getFunction (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:15:5)
at map (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\arr-map\index.js:20:14)
at normalizeArgs (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:22:10)
at Gulp.series (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\series.js:13:14)
at C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\gulpfile.js:7:26
at sass (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:422:14)
at runBound (domain.js:435:12)
at asyncRunner (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:75:11)
This's my code
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('sass', async function () {
return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
});
gulp.task('js', async function () {
return gulp.src(gulp.series('node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/popper.min.js'))
.pipe(gulp.dest('src/js'))
.pipe(browserSync.stream());
});
gulp.task('serve', async function () {
browserSync.init({
server: "./src",
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');
gulp.watch("src/*.html").on('change', browserSync.reload);
})
gulp.task('default', gulp.series(gulp.parallel('sass', 'js', 'serve')));
The error is coming from the sass and js tasks. You are wrapping your sources in gulp.series. So Gulp is trying to run your sources as tasks.
They just need to be in an array [] like in the watch task.
Just change:
gulp.task('sass', async function () {
return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))
to:
gulp.task('sass', async function () {
return gulp.src(['node_modules/scss/bootstrap.scss', 'src/scss/*.scss'])
and then the same format in the js task
The second error (coming from your watch task) is because you need to wrap the tasks you are watching in either series or parallel. Even when theres only one task So change:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');
to:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
Assertion Error using Gulp:
$ gulp scripts
assert.js:42
throw new errors.AssertionError({
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Users/ThedWord/Documents/my-project/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Users/ThedWord/Documents/my-proje
ct/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/Users/ThedWord/Documents/my-project/gulpfile.js:10:6)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
/*eslint-env node */
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const eslint = require('gulp-eslint');
const jasmine = require('gulp-jasmine-phantom');
const concat = require('gulp-concat');
gulp.task('default', ['copy-html', 'copy-images', 'styles', 'lint'], function() {
gulp.watch('sass/**/*.scss', ['styles']);
gulp.watch('js/**/*.js', ['lint']);
gulp.watch('/index.html', ['copy-html']);
gulp.watch('./build/index.html').on('change', browserSync.reload);
});
browserSync.init({
server: './dist'
});
gulp.task('scripts', function(){
gulp.src('js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('scripts-dist', function(){
gulp.src('js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('copy-html', function() {
gulp.src('./index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('copy-images', function(){
gulp.src('img/*')
.pipe(gulp.dest('dist/img'));
});
gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
gulp.task('lint', function () {
return gulp.src(['js/**/*.js'])
// eslint() attaches the lint output to the eslint property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failOnError last.
.pipe(eslint.failOnError());
});
gulp.task('dist', [
'copy-html',
'copy-images',
'styles',
'lint',
'scripts-dist'
]);
gulp.task('tests', function () {
gulp.src('tests/spec/extraSpec.js')
.pipe(jasmine({
integration: true,
vendor: 'js/**/*.js'
}));
});
The problem you are encountering is that you are running gulp v4.0 using gulp 3 syntax. The AssertionError: Task function must be specified error comes from the fact that gulp.task has changed and the 3 parameters signature was removed. In short, your task below will need to be changed to remove the [] parameter:
gulp.task('default', ['copy-html', 'copy-images', 'styles', 'lint'], function() {
gulp.watch('sass/**/*.scss', ['styles']);
gulp.watch('js/**/*.js', ['lint']);
gulp.watch('/index.html', ['copy-html']);
gulp.watch('./build/index.html').on('change', browserSync.reload);
});
This article will help you migrate to gulp 4 syntax.
If you'd like a simple fix to your problem, without having to make changes to your gulpfile.js, run the following command to downgrade your version of gulp from version 4 to 3.9.1:
npm install gulp#3.9.1 --save
Assuming all goes well you should no longer see the Assertion error.
I'm using gulp + browserify to compile an es6 to es5 and then trying to require that in another module (neither of these work):
Main = require('mylibrary/dist/main').Main
Main2 = require('mylibrary/dist/main')
Also tried to to export default class Main and tried class Main then export default new Main
I'm sure this is something simple that I'm missing?
es6 class:
export class Main {
constructor(){
console.log('Main!');
}
test(){
console.log('test');
}
}
output (abbreviated):
var Main = exports.Main = function () {
function Main() {
_classCallCheck(this, Main);
console.log('Main!');
}
_createClass(Main, [{
key: 'test',
value: function test() {
console.log('test');
}
}]);
return Main;
}();
gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");
var babelify = require("babelify");
gulp.task('browserify', function() {
return browserify({
entries: ['src/main.js'],
debug: true
})
.transform(babelify, {presets: ["es2015", "react"]})
.bundle()
.on("error", function (err) { console.log("Error : " + err.message); })
.pipe(source('main.js'))
.pipe(gulp.dest('./dist'));
});
gulp.task('watch', function() {
gulp.watch('src/*.js', ['browserify']);
gulp.watch('src/*.jsx', ['browserify']);
});
gulp.task('default', ['watch','browserify']);
By default Browserify builds a file meant to be run in a browser, not one that is meant to work with require. You want to use Browserify's standalone option via
return browserify({
entries: ['src/main.js'],
debug: true,
standalone: 'someName',
})
I am trying to use ES2015 on my browser and then use gulp to convert it to something that browsers can understand. However, I am getting a path must be a string when running gulp js task.
gulpfile.babel.js
import Browserify from 'browserify';
import Gulp from 'gulp';
import Babel from 'gulp-babel';
import Buffer from 'vinyl-buffer';
import Source from 'vinyl-source-stream';
import Uglify from 'gulp-uglify';
Gulp.task('js', () => {
Browserify({
entries: 'public/scripts/Main.js',
debug: true
}).transform(Babel({
presets: ['es2015-node6']
}))
.bundle()
.on('error', error => console.error(error))
.pipe(Source('main.min.js'))
.pipe(Buffer())
.pipe(Uglify())
.pipe(Gulp.dest('dist/scripts/'));
});
Complete error message
{ Error: path must be a string
at /Users/user/Documents/test/node_modules/resolve/lib/async.js:16:16
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
...
}
I have tried using babelify instead of gulp-babel, however I cannot use gulp-uglify as I am also getting an error
message: 'SyntaxError: Unexpected token: punc ())
If it matters, this is what is inside my main.js
import * as Render from './render';
(() => {
function init () {
console.log('here');
}
window.addEventListener('load', () => {
if (document.readyState === 'complete') {
init();
}
});
})();
and in my `render.js
export function Render () {
console.log('Render');
};
export function RenderPosts () {
console.log('RenderPosts');
}
Also, this isn't some React project. I just want to use ES2015 on the front-end.
Your "path must be a string" error is because of passing a function to .transform.
import Browserify from 'browserify';
import Gulp from 'gulp';
import Babel from 'gulp-babel';
import Buffer from 'vinyl-buffer';
import Source from 'vinyl-source-stream';
import Uglify from 'gulp-uglify';
Gulp.task('js', () => {
Browserify({
entries: 'public/scripts/Main.js',
debug: true
}).transform('babelify', {
presets: ['es2015-node6']
})
.bundle()
.on('error', error => console.error(error))
.pipe(Source('main.min.js'))
.pipe(Buffer())
.pipe(Uglify())
.pipe(Gulp.dest('dist/scripts/'));
});
Just in case you’re not aware, babel-preset-es2015-node6 will only work if your browser supports ES2015 natively. It’s also perfect for use with Gulp as well.
I'm getting this error when trying to run my gulp command. It worked fine last week. Any reason why I'm getting the following error now?
TypeError: Object #<Readable> has no method 'write'
This is what the JS task looks like.
// JS task
gulp.task('js', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src('./src/js/*.js')
.pipe(browserified)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Here's a link to the entire gulpfile.js: https://github.com/realph/gulp-zero/blob/master/gulpfile.js
Any help is appreciated. Thanks in advance!
What version of browserify do you have at the moment? Browserify changed recently to not accept inward streams, just creating some. This would be the correct, adapted code:
var source = require('vinyl-source-stream');
var buffer = require('gulp-buffer');
gulp.task('js', function () {
return browserify({entries:['./src/js/main.js']})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Update I changed the filename to a real file. Note that browserify works best if you just have one file there. If you have to create multiple bundles, please refer to this article