Related
I'm trying to update an old repository that is using Gulp 3.9.1 + browserify 11.2.0 to Gulp 4.0.2 + browserify 17.0.0. But those are not the only packages I'm using in this project.
This is the old package.json and the old code I'm trying to port to the new version:
package.json:
"devDependencies": {
"babel": "^5.8.29",
"babel-cli": "^6.22.2",
"babel-preset-es2015": "^6.22.0",
"babelify": "^6.4.0",
"browserify": "^11.2.0",
"core-js": "^1.2.3",
"extend": "^3.0.0",
"fs": "0.0.2",
"glslify": "^2.3.1",
"gsap": "^1.18.0",
"gulp": "^3.9.1",
"gulp-babel": "^5.2.1",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^3.1.1",
"gulp-newer": "^1.3.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.3",
"uglify-js": "^2.5.0",
"vinyl-source-stream": "^1.1.0"
}
Code:
const gulp = require('gulp')
const source = require('vinyl-source-stream')
const browserify = require('browserify')
const uglify = require('gulp-uglify')
const streamify = require('gulp-streamify')
const babelify = require("babelify");
gulp.task('build', function(){
build();
});
function build() {
browserify('src/index.js', {debug: true})
.transform(babelify)
.transform('glslify')
.bundle()
.on('error', function (err) {
console.log('Error : ' + err.message);
})
.pipe(source('index.min.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('public/js'));
}
The new package.json and the code I have until now, that I'm not sure if it is the correct implementation:
package.json:
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.18.0",
"babel-preset-env": "^1.7.0",
"browserify": "^17.0.0",
"core-js": "^1.2.3",
"extend": "^3.0.0",
"fs": "0.0.2",
"glslify": "^7.1.1",
"gsap": "^3.6.1",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^7.1.0",
"gulp-map": "^0.0.2",
"gulp-newer": "^1.3.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.3",
"uglify-js": "^2.5.0",
"vinyl": "^0.5.3",
"vinyl-source-stream": "^1.1.0"
}
Code:
const gulp = require('gulp');
const browserify = require('browserify');
const babel = require('gulp-babel');
const glslify = require('glslify')
const source = require('vinyl-source-stream');
const streamify = require('gulp-streamify');
const uglify = require('gulp-uglify');
const map = require('gulp-map');
const Vinyl = require('vinyl');
gulp.task(build)
function build() {
gulp.src(['./src/**/*.js', './src/**/*.jsx'])
.pipe(browserify()
.transform(babel({options: 'env'}))
//.transform(glslify('./src/shaders/simple.vert')) // Not working
//.transform(glslify('./src/shaders/water.frag')) // Not working
.bundle().on('error', onError))
.pipe(source('index.min.js'))
.pipe(streamify(uglify()))
.pipe(map(function(file) {
// Explicitly convert to Vinyl object otherwise `gulp.dest()` will fail
return new Vinyl(file); // But it stills failing
}))
.pipe(gulp.dest('./public/js/'));
}
function onError(err) {
console.log('Error : ' + err.message);
}
I'm not sure if that is the correct way to migrate that code. I'm getting several issues from the different browserify modules, for example:
babel: that it seems to be fixed by changing from babelify to gulp-bable
glslify: that it seems to be deprecated, but I don't know which is the replace library
Also, and sorry for being repetitive, as I don't know how the migration should be, I'm getting this error after running the build command (gulp build):
[14:08:34] Using gulpfile ~/Documents/workspace/project/gulpfile.js
[14:08:34] Starting 'build'...
[14:08:34] 'build' errored after 109 ms
[14:08:34] TypeError: dest.write is not a function
at DestroyableTransform.ondata (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:619:20)
at DestroyableTransform.emit (node:events:379:20)
at DestroyableTransform.EventEmitter.emit (node:domain:532:15)
at addChunk (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:291:12)
at readableAddChunk (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:278:11)
at DestroyableTransform.Readable.push (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:245:10)
at DestroyableTransform.Transform.push (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_transform.js:148:32)
at Pumpify.onReadable (/Users/user/Documents/workspace/project/node_modules/to-through/index.js:25:14)
at Pumpify.emit (node:events:379:20)
at Pumpify.EventEmitter.emit (node:domain:532:15)
Sorry for the long explanation, hope someone can help me.
After a lot of researching, I found this blog which has the answer, or almost it has the links to the answer.
One of the links took me to the most detailed tutorial about Gulp + Browserify + Babelify it could ever exist. Here the link. These are a serie of tutorial explaining how to implement Gulp from Scratch. If you don't want to see the videos and just want the code go here.
This is my final gulpfile.js.
And this is the answer to my question:
My formerly build function in gulpfile.js (now called js)
function js(done) {
jsFiles.map( function( entry ) {
return browserify({
entries: [constants.jsSRC + entry] // constants.jsSRC == "./src/js/"
})
.transform( babelify, { presets: [ '#babel/preset-env' ] } )
.transform('glslify')
.bundle()
.pipe(source( entry ) )
.pipe(rename( {
extname: '.min.js'
}))
.pipe(buffer() )
.pipe(gulpif( options.has( 'production' ), stripDebug() ) )
.pipe(sourcemaps.init({ loadMaps: true }) )
.pipe(uglify())
.pipe(sourcemaps.write( '.' ))
.pipe(dest(constants.jsURL)) // constants.jsURL == "./dist/js/"
.pipe(browserSync.stream());
});
done();
}
The task inside the same file gulpfile.js
task("js", js);
My package.json file.
...
"devDependencies": {
"#babel/core": "^7.13.14",
"#babel/preset-env": "^7.13.12",
"babelify": "^10.0.0",
"browser-sync": "^2.26.14",
"browserify": "^17.0.0",
"browserify-shim": "^3.8.14",
"core-js": "^1.2.3",
"glslify": "^7.1.1",
"gsap": "^3.6.1",
"gulp": "^4.0.2",
"gulp-connect": "^2.2.0",
"gulp-if": "^3.0.0",
"gulp-notify": "^3.2.0",
"gulp-options": "^1.1.1",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-strip-debug": "^4.0.0",
"gulp-uglify": "^1.5.3",
"gulp-uglifycss": "^1.1.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"babel": {
"presets": [
"#babel/preset-env"
]
},
"browserify": {
"transform": [
"browserify-shim"
]
},
...
Note that there is a babel section and a browserify section that are also needed.
And to run that gulp task simply do:
gulp js
One last thing, the example of the tutorials (thank you Alessandro Castellani) and my final solution, are mostly the same and also contain the other tasks to process the css files, the fonts, the images, and the html file. All of those files are moved to a "production" folder, in my case called dist.
Rails 6, Webpacker and Flickity
Quick demo app: https://github.com/ratahtatah/flickedyflack
Try 1: Pure jQuery
TypeError: $(...).flickity is not a function
app/javascript/packs/application.js
require("#rails/ujs").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
require("flickity")
import "flickity/dist/flickity.min.css";
$(".main-carousel").flickity({
contain: true
});
config/webpack/environment.js
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide', new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
flickity: 'flickity/dist/flickity.pkgd.min'
})
)
module.exports = environment
Try 2: jQuery w/ jQueryBridget (Feifei Xiong)
No errors, but also no initialization
app/javascript/packs/application.js
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');
jQueryBridget('flickity', Flickity, $);
$(".main-carousel").flickity({
contain: true
});
package.json
{
"name": "flicketyflack",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"flickity": "^2.2.1",
"jquery": "^3.4.1",
"jquery-bridget": "^2.0.1",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
Maybe you need to use jquery-bridget to initialize Flickity as a jQuery plugin.
yarn add jquery-bridget
Then in application.js
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');
jQueryBridget( 'flickity', Flickity, $ );
# If your are using turbolinks
$(document).on('turbolinks:load', function() {
$(".main-carousel").flickity({
contain: true
});
});
If you are not using turbolinks, try following:
$(document).ready(function() {
$(".main-carousel").flickity({
contain: true
});
});
Try adding this line to your application.js
import $ from 'jquery';
Add it before $(".main-carousel").flickity...
I'm having an issue with gulp-handlebars returning TypeError: Handlebars.template is not a function. It has been working relatively flawless up until now however it appears to have stopped. Any ideas what I'm missing here?
Looking in the bower folder handlebars is showing as 3.0.3 same as with the node modules folder. Looking at the resulting compiled templates file however all templates appear to be showing "compiler":[6,">= 2.0.0-beta.1"] which I suspect maybe the cause
console.log Handlebars in the browser returns handlebars but the template property is an empty object
My package.json
"devDependencies": {
"handlebars": "^3.0.3",
"gulp": "^3.8.11",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.5.2",
"gulp-declare": "^0.3.0",
"gulp-handlebars": "^4.0.0",
"gulp-jshint": "^1.9.2",
"gulp-rename": "^1.2.0",
"gulp-sequence": "^0.3.2",
"gulp-uglify": "^1.1.0",
"gulp-watch": "^4.1.1",
"gulp-wrap": "^0.11.0",
"gulp-yuidoc": "^0.1.2"
}
My bower.json
"dependencies": {
"bootstrap": "~3.3.2",
"jquery": "~2.1.3",
"sammy": "~0.7.6",
"showdown": "~0.4.0",
"handlebars": "3.0.3",
"pagedown": "~1.1.0"
},
"devDependencies": {
"jqueryui": "~1.11.4"
}
My gulp tasks
gulp.task('templates', function() {
gulp.src(['public/templates/**/*.hbs', 'public/templates/*.hbs'])
.pipe(handlebars({
handlebars: require('handlebars')
}))
.pipe(wrap('Handlebars.template(<%= contents %>)'))
.pipe(declare({
namespace: 'Handlebars.templates',
noRedeclare: true, // Avoid duplicate declarations
}))
.pipe(concat('templates.js'))
.pipe(gulp.dest('public/js/'));
});
gulp.task('watch', function() {
gulp.watch(['public/templates/*.hbs', 'public/templates/**/*.hbs'], ['templates']);
gulp.watch(['public/js/*.js', 'public/js/**/*.js'], ['build']);
});
Link to Github Issue - https://github.com/lazd/gulp-handlebars/issues/55
Thanks
When concatenating and minifying through gulp make sure your paths are correct. Mine changed and gulp didn't throw any errors about not finding the files!
gulp-load-plugins is not loading any plugins. Can anyone suggest why this might be?
Node: v0.12.0
NPM: v2.7.3
My package.json:
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0"
}
}
My gulpfile.js:
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
console.log(JSON.stringify(plugins)); // {}
gulp.task('default');
Install other gulp plugins.
tl;dr
If that is your complete package.json, looks like you have no other gulp plugins installed.
Lets say the following is your package.json:
package.json
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0",
"gulp-rename": "^1.2.0",
"gulp-concat": "^2.5.2"
}
}
You $ npm install everything, then...
gulpfile.js
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
// `plugins.rename` should exist
// `plugins.concat` should exist
console.log(JSON.stringify(plugins));
gulp.task('default');
Try setting lazy loading to false.
var gulp = require('gulp');
var plugins= require('gulp-load-plugins')({lazy:false});
console.log(JSON.stringify(plugins));
gulp.task('default');
And as others mentioned, install some plugins.
Let me show you what i have and how i do it , maybe that will help.
My package.json :
{
"dependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-html-validator": "0.0.5",
"gulp-image-optimization": "^0.1.3",
"gulp-plumber": "*",
"gulp-rev-collector": "^0.1.4",
"gulp-rev-manifest-replace": "0.0.5",
"gulp-ruby-sass": "*",
"gulp-sass": "*",
"gulp-scss-lint": "^0.1.10",
"gulp-sourcemaps": "*",
"imagemin-optipng": "^4.2.0",
"imagemin-pngquant": "^4.0.0",
"vinyl-paths": "^1.0.0"
},
"devDependencies": {
"del": "^1.1.1",
"gulp-cached": "^1.0.4",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.6",
"gulp-filesize": "0.0.6",
"gulp-gzip": "^1.0.0",
"gulp-htmlhint": "0.0.9",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-load-plugins": "^0.8.0",
"gulp-rename": "^1.2.0",
"gulp-rev": "^3.0.1",
"gulp-uglify": "^1.1.0",
"gulp-useref": "^1.1.1",
"gulp-webserver": "^0.9.0",
"run-sequence": "^1.0.2"
}
}
How i run gulp-load-plugins :
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true
}),
And this is an example of a plugin:
// html optimization
gulp.task('htmloptimize', function () {
return gulp.src(dev.html)
.pipe($.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(dist.dist))
});
As you can see all my pipes are called .pipe($.plugin()) meaning $ stands for gulp- . If you have a plugin named gulp-name-secondname you call it like this: .pipe($.nameSecondname()) .
Top were i require gulp-load-plugins i have camelize set to true . Lazy loading loads only the plugins you use not all of them .
Careful with gulp-load-plugins because it slows your tasks , for example i run gulp-webserver , when i use it with gulp-load-plugins the task finishes after 200ms versus 20ms if i use it normally. So don't use with everything, play with it see how much performance you lose on each task and prioritize.
There are many similar questions including answers here on stack overflow, but none of them have worked for me, so here I am asking you guys. I appreciate everyone's time.
I recently started using gulp with browserify, and that works great.
I then tried to use browserify for the front-end using: Backbone and Bootstrap3.
things are appearing to work, until I try to require the js file that comes with Bootstrap. I get an error in my chrome tools stating: jQuery is undefined.
I have attempted to shim it in, but I am very confused by the shim. I am using jQuery 2.1.1, so I should not need to shim jQuery, but it exists in the shim now, as I was desperate and trying everything. Here is my package.json and my main.js file:
--------------package.json------------------
{
"name": "gulp-backbone",
"version": "0.0.0",
"description": "Gulp Backbone Bootstrap",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rob Luton",
"license": "ISC",
"devDependencies": {
"jquery": "^2.1.1",
"backbone": "^1.1.2",
"browserify": "^4.2.1",
"gulp": "^3.8.6",
"vinyl-source-stream": "^0.1.1",
"gulp-sass": "^0.7.2",
"gulp-connect": "^2.0.6",
"bootstrap-sass": "^3.2.0",
"browserify-shim": "^3.6.0"
},
"browser": {
"bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
"jQuery": "./node_modules/jquery/dist/jquery.min.js"
},
"browserify": {
"transform": ["browserify-shim"]
},
"browserify-shim": {
"jquery": "global:jQuery",
"bootstrap": {
"depends": [
"jQuery"
]
}
}
}
------------------------- main.js ----------------------
var shim = require('browserify-shim');
$ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var bootstrap = require('bootstrap');
/* the following logs fine if I comment out the bootstrap require, otherwise I get 'jQuery undefined' */
console.log(Backbone);
$(function() {
alert('jquery works');
});
You shouldn't need to shim jquery that way if you've installed it with npm. The following works for a project I've been writing:
I've also learned that using npm for bootstrap is kind of a PITA. I've been using bower to install and maintain certain front-end components when they need to be shimmed like this.
package.json:
{
"name": "...",
"version": "0.0.1",
"description": "...",
"repository": {
"type": "git",
"url": "..."
},
"browser": {
"d3js": "./bower_components/d3/d3.min.js",
"select2": "./bower_components/select2/select2.min.js",
"nvd3js": "./bower_components/nvd3/nv.d3.min.js",
"bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
},
"browserify": {
"transform": [
"browserify-shim",
"hbsfy"
]
},
"browserify-shim": {
"d3js": {
"exports": "d3",
"depends": [
"jquery:$"
]
},
"bootstrap": {
"depends": [
"jquery:jQuery"
]
},
"select2": {
"exports": null,
"depends": [
"jquery:$"
]
},
"nvd3js": {
"exports": "nv",
"depends": [
"jquery:$",
"d3js:d3"
]
}
},
"devDependencies": {
"browserify-shim": "~3.4.1",
"browserify": "~3.36.0",
"coffeeify": "~0.6.0",
"connect": "~2.14.3",
"gulp-changed": "~0.3.0",
"gulp-imagemin": "~0.1.5",
"gulp-notify": "~1.2.4",
"gulp-open": "~0.2.8",
"gulp": "~3.6.0",
"hbsfy": "~1.3.2",
"vinyl-source-stream": "~0.1.1",
"gulp-less": "~1.2.3",
"bower": "~1.3.3",
"cssify": "~0.5.1",
"gulp-awspublish": "0.0.16",
"gulp-util": "~2.2.14",
"gulp-rename": "~1.2.0",
"gulp-s3": "git+ssh://git#github.com/nkostelnik/gulp-s3.git",
"gulp-clean": "~0.2.4",
"process": "~0.7.0"
},
"dependencies": {
"backbone": "~1.1.2",
"jquery": "~2.1.0",
"lodash": "~2.4.1",
"d3": "~3.4.8",
"rickshaw": "~1.4.6",
"datejs": "~1.0.0-beta",
"moment": "~2.7.0"
}
}
js:
$ = jQuery = require('jquery');
var _ = require('lodash');
var Rickshaw = require('rickshaw');
var d3 = require('d3js');
var nvd3 = require('nvd3js');
var moment = require('moment');
require('datejs');
require('select2');
var bootstrap = require('bootstrap');
console.log(bootstrap)
Also - one sometimes useful thing is to have browserify-shim output its diagnostics. This is what my browserify.js task looks like:
var browserify = require('browserify');
var gulp = require('gulp');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');
var process = require('process');
process.env.BROWSERIFYSHIM_DIAGNOSTICS=1;
var hbsfy = require('hbsfy').configure({
extensions: ['html']
});
gulp.task('browserify', ['images', 'less'], function(){
return browserify({
transform: ['hbsfy', 'cssify'],
entries: ['./src/javascript/app.js'],
})
.bundle({debug: true})
.on('error', handleErrors)
.pipe(source('app.js'))
.pipe(gulp.dest('./build/'));
});
There is error as I am using browserify which require the variable '$' or 'jQuery' to be defined.
adding the window to make it global resolve the error. Not sure if this would be the correct way to do, if not, let me know.
window.$ = window.jQuery = require('jquery');
var bootstrapjs = require('bootstrap-sass');
I've been wondering about this for a while. This simple solution does the job for me:
import foo from 'foo';
import bar from './bar';
import { default as $ } from "jquery";
global.$ = $;
global.jQuery = $; // This one does the trick for bootstrap!
// Boostrap's jQuery dependency only works with require, not with ES6 import!
const btp = require('bootstrap');
So to make Bootstrap to work with Browserify you're going to need one of Browserify CSS transforms.
First the index.js (browserify entry)
// Bootstrap needs jQuery on the Window
window.jQuery = $ = require('jquery');
// include popper.js if you want Bootstrap tooltips
window.Popper = require('popper.js');
// include bootstrap js libs (not the CSS libs as yet)
require('bootstrap');
// then the CSS Lib
require('bootstrap/dist/css/bootstrap.css');
NPM Installs:
npm install bootstrap#4.0.0-alpha.6 jquery popper.js
To use tooltips globally:
Per the Bootstrap docs.
$('[data-toggle="popover"]').popover();
I have a Browserify-Budo repo here. If you want to see it working.