We Keep Coding

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/'))
})

How can I gzip a uglify js with Gulp without generating two file in dist folder

I'm new using Gulp.
I'm wondering how can I concat, uglify and gzip all the js files from a static website using Gulp.
I have a task like this that works but I would like to only include in the dist folder the .gz file and not the combined.js
gulp.task("concat-js", function () {
return gulp.src("./src/js/*.js")
.pipe(concat("combined.min.js"))
.pipe(uglify())
.pipe(gzip())
.pipe(gulp.dest("./build/js"));
});
UPDATE
I encourage you to read the comments. In my case, the problem has been caused by a bad use of gulp-useref, because was generating the file at the end of the build process. Probably noob problem, but hopefully can help anyone.
Thanks in advance...

This should work. Just store the .min file in a temp folder. You can delete that later if you want.
gulp.task("concat-js", function () {
return gulp.src("./src/js/*.js")
.pipe(concat("combined.min.js"))
.pipe(gulp.dest('./temp'))
.pipe(uglify())
.pipe(gzip())
.pipe(gulp.dest("./build/js"));
});
The final file would be "combined.min.js.gz" the only one in build/js. If you don't like that name you could rename it with gulp-rename.

1 gulp file build multiple projects

I am building a series of plugins for WP, and want to use gulp to manage the assets.
I have created a strict naming/directory pattern in each of the plugins, in order to make using the task management easier. Currently all the plugins sit in the basic WP structure, and my gulp file sits below root and runs fine.
I am now extracting all the plugins into composer packages. I now want to build the plugins, and leave all the assets in the plugin directories rather than dumping them to the theme. I have now put the "builder" into its own package, which I can run from my IDE.
e.g.
pluginOne
pluginTwo
pluginBuilder
I have so far created this to find the scss files build the style:
How can I tell gulp to pipe back to the directory it found? I've only managed to get it to pipe to specific dir
gulp.task('style', function() {
glob('../plugins/pluginprefix-*/assets/build/scss/pluginprefix.*.scss', {}, function (er, files) {
gulp.src(files)
.pipe(plugins.plumber())
.pipe(plugins.sass())
.pipe(plugins.autoprefixer('last 10 version'))
.pipe(plugins.minifyCss())
.pipe(gulp.dest(''));
})
});
Thanks for any help or advice =)

This should work:
var rename = require('gulp-rename');
...
.pipe(rename(function(path){
path.dirname = path.dirname;
path.basename = path.basename;
});
.pipe(gulp.dest(''));

Gulp - Target all files in a folder and its subfolders

I'd like to be able to add a watch task in gulp to all of the js files in the frontend/js and any other js files below
gulp.watch('./frontend/js/**/*.js', ['browserify']);
This will only target js files one folder deep

It's supposed to match any number of subdirectories:
** If a "globstar" is alone in a path portion, then it matches zero or more directories and subdirectories searching for matches. It does not crawl symlinked directories.
https://github.com/isaacs/node-glob
Do you have symlinked directories in there?
Symlinks
I don't think you'll get gulp to natively traverse your symlinked directories. I recommend you take a look at node.js fs.readdir recursive directory search and see if any of those solutions can be applied to your use case. Nothing in the question or answers specifically addresses symlinks, so I don't know if there's a solution for you there or not. If you can get an array of dereferenced pathnames using one of those solutions, then you can just pass the array to gulp.src().

I just did some testing - and this actually works just fine for me.
I currently have the following structure -
--apps
--scripts
----test.js
----test-folder
------test2.js
------test-folder-deep
--------test3.js
--myApp
----scripts-symlinked (symlinked to apps/scripts)
----gulpfile.js
I set up my symlink folder (on Mac - from 'myApp' folder) using:
ln -s /Users/kandrews/apps/scripts ./scripts-symlinked
In my gulpfile.js I have the following:
var gulp = require('gulp'),
jshint = require('gulp-jshint');
gulp.task('jshint', function () {
gulp.src('./scripts-symlinked/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('watch', function () {
gulp.watch('./scripts-symlinked/**/*.js', ['jshint']);
});
Works perfectly. I also tried this in a sub directory as well ('scripts/symlinked-scripts') and was successful as well.

I think it’s not worth doing difficult:
gulp.watch('./frontend/js/', ['browserify']);

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