Traceur + browserify + uglyify in gulp - javascript

I want to have a gulpfile that first transforms my es6 code to es5 and save it to one dir, then browserify it (on every file, not just an entry file) and save it to another dir, lastly I want to minify it and put it in the browserified folder as .min.js files. Here's a diagram of what the result should look like:
src/
es6/
index.js
mod.js
es5/
index.js
mod.js
es5-browser/
index.js
index.min.js
mod.js
mod.min.js
Here's my gulpfile so far but I keep getting a can't find module error:
var gulp = require('gulp');
var traceur = require('gulp-traceur');
var browserify = require('gulp-browserify');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('es5ize', function () {
return gulp.src('src/es6/**/*.js')
.pipe(sourcemaps.init())
.pipe(traceur({sourceMaps: true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/es5'))
.pipe(browserify({
debug : true
}))
.pipe(gulp.dest('src/es5-browser'))
;
});
I know I shouldn't be using gulp-browserify but I wasn't able to get anything like this to work with vinyl either.
It works up until the browserify step
How can I get this to work?
EDIT:
I want to be able to keep this in gulp and not have to exec anything, since I will eventually want to use watchify on this too
All the other examples that are close to this first have browserify create a bundle and then manipulate that bundle but this means that it will always start browserifed which I don't want. They also seem to need to specify an entry file for browserify but I want to specify a glob and have it transform everthing that matches

you need traceur to compile as commonjs modules so browserify will understand .pipe(traceur({modules: 'commonjs' }))

Related

How to webpack bundle a file which requires another file at runtime depending upon command line argument?

Consider a very simple application with the project structure
-- package.json
-- webpack.config.js
-- src
|---index.js
|---runner.js
The index.js takes in command line arg to require a file, at runtime. Here is index.js:
function requireAtRuntime(filename){
const runner = require(filename);
runner.run()
}
var filename = process.argv[2];
requireAtRuntime(filename);
runner.js
function run(){
console.log("hello world");
}
exports.run = run
package.json contains the script:
//
scripts :{
"start" : "node src/index.js ./runner.js"
}
This start scripts work well. Now the issue if I want to webpack index.js, runner.js is not included as it dependency and the bundle throws the error when i try to run
node dist/main.js path/to/runner.js
Error: Cannot find module 'path/to/runner.js'
How do I build my webpack so that it can too take filename as command line argument and require it during runtime (or store it before somewhere)?
We need to provide some kind of hint to webpack around what all files may be dynamically required. Lets assume we have multiple runners. We need to put all of them in a folder like shown below
-- package.json
-- webpack.config.js
-- src
|---index.js
|---runners
|---runner1.js
|---runner2.js
Now we need to change the requireAtRuntime() function.
index.js:
function requireAtRuntime(filename){
const runner = require(`./runners/${filename)`);
runner.run()
}
var filename = process.argv[2];
requireAtRuntime(filename);
This will make webpack to fetch all the files in runners and bundle them during compile time.
Now we can run it as
node src/index.js runner1/2 (before bundling) or
node dist/main.js runner1/2 (after bundling)
you have to declaratively specify runner.js as externals, so that webpack won't bundle it at compile time
https://webpack.js.org/configuration/externals/

Webpack 4 without bundle

Simple question about webpack is it possible to have only concat and minify js file without code of webpack like this:
/******/ (function(modules) { // webpackBootstrap
i'm using extract-plugin, uglifyjsOption actually
i have multiple entry point on my webpack config like this
entry: {
account: [
'js/lazyload.js',
'matchmedia-polyfill/matchMedia.js',
'jquery-ui/ui/core.js',
],layout:[
'js/main.js',
'js/form.js',
'js/password-complexity',
]}
For each entry point i have my key and just want to have for each key the js only concat and minify without the module bundler of webpack.
I try this but it 's the same
But i just want to concat and minify without bundler and need tio use Webpack and not gulp.
Thx for reply

How to bundle js files in none node environment?

I'm developing websites with several js files and I want to bundle these js files into one js file. I started looking at Webpack, but it requires node environment to run. In fact, all my js files are none-node style, and each one of them is independent. My development environment is not node, so I'm wondering how to make all my js files into one js file.
Your js files do not need to be written as CommonJS modules ("node style") in order to bundle them with webpack.
If you want you can use loaders like the imports-loader and exports-loader to make scripts not written as CommonJS modules accessible in a webpack context.
However, it sounds like you may not even need webpack for your use case.
I would recommend using a simple gulp recipe to concatenate and minify your existing JavaScript files into a single file.
const concat = require('gulp-concat')
const gulp = require('gulp')
const rename = require('gulp-rename')
const uglify = require('gulp-uglify')
gulp.task('default', function () {
// Find all the JavaScript files in the src directory.
return gulp.src('src/*.js')
// Concatenate them all together and name the resulting sciprt app.js.
.pipe(concat('app.js'))
// Minify the script to save space.
.pipe(uglify())
// Change the file extension.
.pipe(rename({ extname: '.min.js' }))
// Output to the dist directory.
.pipe(gulp.dest('dist/'))
})

Gulp with browserify: Cannot find start module

I have pretty much the exact same problem as described in Gulp with browserify: Cannot find module src/js/main.js: I have a JavaScript project that I can build using browserify from the command line, but not in gulp. But the solution for that question does not work for me.
From the command line:
browserify -t reactify ./js/inspector > static/js/inspector.js
works perfectly. When I run the following gulp task:
gulp.task('browserify', function() {
return browserify({
transform: ['reactify'],
entries: ['./js/inspector.js']
})
.bundle()
.pipe(source('inspector.js'))
.pipe(gulp.dest('./static/js/'));
});
and run it, I get the following error in the console:
Error: Cannot find module '../../inspector'
and also the generated file has the same length as the CLI file but not the same order of modules. Which puzzles me.
I have the same version of browserify in my global and local modules, and I've not knowingly configured it, anywhere.
Unlike Ben Davis, who asked the other question, adding a ./ to the start of my path changes nothing.
I don't understand why browserify gives a different, and broken, output, when run through gulp.
Update: The directory structure of the project:
gulpfile.js
node_modules/
js/ (also contains subdirectories with JS code)
inspector.js
static/
js/
inspector.js (built)
Update: When I run Browserify through Grunt, I also get a different file, but it works.
You can try wrapping your return function in an IIFC.
//======================================
// Task: browserify
//======================================
gulp.task('browserify', function() {
return (function() {
browserify(config.src)
.bundle()
.pipe(source(config.name))
.pipe(gulp.dest(config.dest));
})();
});
I am using the above successfully in a current proj.
I had other modules that required the root module, à la:
var inspector = require('../../inspector');
This is what caused the problem (somehow). Putting in a root module that was never required by anything else made gulp + browserify work without any problems.
I'll see if I can create a minimal reproduction project for the gulp / browserify maintainers.

concat underscore templates in a directory to a single js file and load it for use with a backbone app

I'd like to combine all the underscore templates in a directory to a single js file ( possibly precompile it ? ) for use with the backbonejs part of my sails.js app.
I think I can use the plain fs module with nodejs to read the files and combine them, I'm looking at grunt to do this as well but still not sure.
Can someone help me with this ?
You can use grunt to do this. The plugin grunt-contrib-jst is what you're looking for; it has installation and usage documents here.
A simple Gruntfile.js like this should do it. (This example assumes all your source code is under a src/ subdirectory, all templates are in *.html files under src/, and you're creating an output file in the build/ subdirectory. Adjust as needed to fit your actual situation.) Run by typing grunt on the command line.
Just include the single file build/view-templates.js in your index file to load all of your Underscore view templates.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jst');
grunt.initConfig({
// compile view templates into single file
jst: {
compile: {
files: {
"build/view-templates.js": ["src/**/*.html"]
}
}
}
});
grunt.registerTask('default', 'jst' );
};

Categories