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/'))
})
Related
I am trying to find a way to minimize specific files using laravel-mix. From the documentation it specifies you are able to minify files using npm run prod. My goal is to minify file a.js but not b.js. Is this possible through webpack.mix.json config file or through the npm command alias in package.json?
Versions:
laravel-mix#1.7.2
npm#6.4.1
laravel#5.5.48
this is example to minify specific files
const mix = require('laravel-mix');
// 1. A single src and output path.
mix.js('src/app.js', 'dist/app.js');
// 2. For additional src files that should be
// bundled together:
mix.js([
'src/app.js',
'src/another.js'
], 'dist/app.js');
// 3. For multiple entry/output points:
mix.js('src/app.js', 'dist/')
.js('src/forum.js', 'dist/');
I'm using webpack with babel-loader to organize my webdriverio scripts. Since I'm writing automated web-site testing scripts, I don't have a production environment per-se, so the point of using webpack is really just to organize my code chunks better and transpile my es6 code to es5 since node does not allow all es6 features.
I have a script: "../../../external/file-search.js" which I am requiring at the top of an index.js file. The point of file-search.js is to search through the directory and require all files in that directory using fs. This is what my index.js file looks like (located in ~/tasks/):
var fileSearch = require("../../../external/file-search.js");
var d = __dirname;
fileSearch(d);
when I run "webpack tasks test.js" webpack compiles file-search.js into my "test.js" file rather than requiring file-search.js and allowing me to use it's exported method in my index.js file. I will use file-search.js in all my index.js files so it's important to include it as a module. I've tried using externals but as far as I know, externals simply exclude certain modules from being compile/transpiled and try to bundle them into the final script. I actually want to require that script and use it right away in my index.js file. How can I require file-search.js and use it right away as part of my index.js file?
I am working in node js application. I want to minify server js files. Am using gulp for that purpose.
var folders = ['business','config','controllers','model','routes','utilities']
gulp.task('minify', function() {
for(i=0;i<folders.length;i++){
gulp.src(folders[i]+'/*.js')
.pipe(rename({suffix: ""}))
.pipe(minify({ext:'.js'}))
.pipe(gulp.dest(folders[i]))
}
});
This is my gulp file. I need to minify the files in the folder without renaming or recreating any new file. But now it is creating in different folder and files will be appended with min suffix.
Is there any way to resolve this in gulp.
I tried this with both gulp-minify and gulp-uglify. gulp-minify seems to be adding that suffix willingly.
You can use gulp-uglify instead which worked for me:
gulp.src(folders[i]+'/*.js')
.pipe(uglify())
.pipe(gulp.dest(folders[i]))
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' }))
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' );
};