We Keep Coding

using browserify-css with grunt

I currently have grunt-browserify to build a few js files into a bundle. I'm trying to add css into the bundle via require('./style.css'). I've been researching some options to do this and found the browserify-css library (https://www.npmjs.com/package/browserify-css). However there is no grunt support so I'm not sure how to add this to my existing grunt settings.
It seems that I need to add browserify-css as a transform option. The grunt-browserify says that the transform option takes an array of tasks (see below). However, I don't think browserify-css can be written as a grunt task. What's the best practice in this situation?
browserify: {
dist: {
files: {
'dist/bundle.js': 'js/index.js'
}
},
transform: ['coffeify']
}

I checked the source code of browserify, and I found this solution:
browserify: {
dist: {
src: 'js/index.js',
dest: 'dist/bundle.js'
},
options: {
transform: [['browserify-css', { global: true }]]
}
}
This works for me when I need to copy css files from node_modules folder. For make it work you only need to run:
npm install browserify browserify-css grunt-browserify --save-dev
and that's it!.

Trouble implementing Webpack css-loader, error on compile

I'm new to webpack, and I'm playing around with trying to create my own build from forking another decent build.
One of things that wasn't compiling was the css, so I did the following:
Make sure there were no css loaders currently in the webpack config file (there weren't)
Run npm install css-loader --save-dev
Add loaders
Add import css from './static/css/style.css'; to my entry .js file
Make some arbitrary changes to my css to test
Just for the sake of clarity, my loaders looked like this:
loaders: [
{ ...babel loader... },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
]
I then ran npm run build, and it was here that my terminal came up with the following error:
ERROR in ./src/app-client.js
Module not found: Error: Cannot resolve module 'style-loader' in /path/to/app/.../src
# ./src/app-client.js 15:13-46
I'm not really sure where I'm going wrong here, any help or pointers would be appreciated.

You probably forgot to install style-loader. So just run:
npm install style-loader --save-dev

Using grunt to compile jade templates to javascript functions in sails.js

I am building an application in Sails.js and i want to compile some jade templates to javascript functions for use from the client. I have found a few articles explaining how to do this, but when i try to implement their steps they don't seem to work for me
I am trying to compile files located in App/Views/Client and put the compiled javascript files into App/.tmp/public/templates
My grunt task is in App/tasks/config and is based on the coffeescript grunt task that comes with sails.js. My grunt task looks like this
module.exports = function(grunt) {
grunt.config.set('jade', {
dev: {
templates:{
options: {
pretty: true,
client: true,
namespace: 'Templates'
},
files: [{
expand: true,
cwd: 'views/client/',
src: ['**/*.jade'],
dest: '.tmp/public/templates/',
ext: '.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
};
I have added it to the compileAssets.js grunt task that comes with sails.js, and i can see it being run when i run the sails lift command.
When it runs it reports 0 files created, which suggests to me that there is a problem with my paths. However i have defined them based on the same working folder as the other grunt tasks in sails.js. I have tried a number of variations on the paths, including putting ./ at the start of them, but none seem to work.
Can anyone help explain what is wrong with my grunt file? Or how to make it output the folder it is looking at to the console so i can figure out whether my path is correct or not?

Your configuration object is one level too deep.
dev is already the task's target and Grunt will start looking for the files property in there. templates is quietly ignored.
So the configuration object should look like this:
dev: {
options: {
pretty: true,
client: true,
namespace: 'Templates'
},
files: [{
expand: true,
cwd: 'views/client/',
src: ['**/*.jade'],
dest: '.tmp/public/templates/',
ext: '.js'
}]
}

How to preserve sourcemaps from Babel transpiling to r.js uglifying?

I'm writing ES6 JavaScript modules and using Babel to transpile them to ES5. Babel generates sourcemaps that point back to the original ES6 code. I then use r.js to take those ES5 AMD modules and combine and uglify them. r.js creates a sourcemap that shows the ES5 files. I want the ES6 ones from the first step. My grunt file looks like this:
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
// Project configuration.
grunt.initConfig({
babel: {
options: {
modules: "amd",
sourceMap: true
},
dist: {
files: {
"es5/editor.js": "src/editor.js",
"es5/editor-events.js": "src/editor-events.js"
}
}
},
requirejs: {
production: {
options: {
baseUrl: "es5",
mainConfigFile: "es5/require.config.js",
name: "../node_modules/almond/almond",
include: ["editor"],
out: "dist/ed.js",
optimize: "uglify2",
generateSourceMaps: true,
preserveLicenseComments: false
}
}
}
});
// Default task(s).
grunt.registerTask('default', ['babel', 'requirejs']);
};
It compiles everything perfectly. But it loses the nice ES6 sourcemaps. Any way to keep them? Is there a better build process that'll get me to a single, browser-friendly JavaScript file?

you shouldn't use two different steps for building your app. one for transpiling and an other one for bundling. you should have one step instead.
you could use browserify to bundle them and babelify as transpiler. the command would look like this:
browserify app.js -t babelify -d -o bundle.js
Note: -d (debug) will enable the sourcemaps. they will point to the es6 files.

reference multiple js files in a single line in a html file

Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?
Instead of this -
<script type="text/javascript" src="js/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/browseCtrl.js"></script>
...
I'm looking for something like this -
<script type="text/javascript" src="js/controllers/*.js"></script>
Or is there a tool out there that copies the contents of these files into one file and reference that one file instead? This will be minimize the HTTP calls.

Is there an easy way to reference all js files in an HTML file rather than referencing it one by one?
For some value of "easy". There is nothing built in to browsers that will do it though.
Or is there a tool out there that copies the contents of these files into one file and reference that one file instead?
There are many. cat is the simplest one.
Call it from your usual build tool.
You can use something like require.js to combine them at runtime during development, and call r.js via Node from your build tool for packaging for your staging and live environments.

You can give Require.js a go. Require.js is the only JavaScript-file that is loaded through the script-tag. When you go out of development you can use Require.js's r.js to minify and concat everything into one file.

I use this tool all the time to minify my JS files:
Online Javascript Compression Tool
You can upload multiple files and it will concatenate them into one for you. It also produces smaller filesizes than YUI compressor, and Google's JS compiler most of the time too.

I am not sure why this hasn't been mentioned yet, but I do suppose this thread is a bit dated. Since I stumbled on this during my search to solve this very problem, I thought I would put a quick write-up about GruntJS here for other newbie JS guys to find.
Essentially, a properly configured Gruntfile.js will be able to perform a variety of tasks around JS including, but not limited to: concatenating files, minifying files, code linting, and much much more.
You can install grunt on Ubuntu with:
$ sudo apt-get install nodejs
$ sudo npm -g install grunt-cli
$ cd /path/to/my/project
--- Assumming you have a package.json file already in place ---
$ npm install grunt --save-dev
--- Install grunt plugins you wish to use ---
$ npm install grunt-contrib-concat --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-watch --save-dev
On the GruntJS site, there is a pretty good write-up for how to use GruntJS, but here is an example Gruntfile.js that will:
Lint all the JS files (app.js in the current directory and all .js files in the ngmodules directory).
Concatenate and save the files to dist/package-name.js.
Minify the concatenated file and save it to dist/package-name.min.js.
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['app.js', 'ngmodules/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
files: ['Gruntfile.js', 'app.js', 'ngmodules/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};

There is also Gulp (http://gulpjs.com/), which can be used with various plugins. Here's an example that concatenates *.js files in one single file (main.js), then renames the resulting file and finally minifies it:
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('scripts', function(){
return gulp.src('./src/js/*.js')
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('./src/js/*.js'));

You can try and combine your javascript files or plugins into one:
<script type="text/javascript" src="js/controllers/plugins.js"></script>
You'll have to do it manually though.
Another option would be to write a server-side script to combine and minify all your javascript files.