I'm using hbsfy (handlebars templating package) as a transform for browserify in a grunt file. How do I pass the -t or --transform argument to the hbsfy transform?
grunt.initConfig({
browserify: {
build: {
src: 'src/js/app.js',
dest: 'app.js',
options: {
transform: ['browserify-shim', 'hbsfy'],
browserifyOptions: {
debug: true,
},
},
},
});
If I were to use browserify conventionally the code would look like:
browserify -t [ hbsfy -t ] main.js > bundle.js
How do I get the -t when using grunt-browserify?
After looking at some of the existing answered issues for grunt-browserify, the following resolved my issue:
options: {
transform: ['browserify-shim', ['hbsfy', {'t':[]}]],
},
I have added hbsfy as an array where the second argument is an options object which contains the empty t option. this allows me to simulate hbsfy -t in grunt-browserify.
I hope this helps others with the same issue.
Related
Hierarchy:
App
.tmp // temp files
app // source files
dist // dist files
So if I put the devcode:build before requirejs:
Files from "app/scripts" are processed and saved into ".tmp/scripts"
Requirejs will be pointed to load the ".tmp/scripts"
Then fails because bower_components are not found at "bower_components"; Of course, because bower_components are located in "app/bower_components"
If I inverse the order:
Requirejs removes the comments and devcode doesn't work
I will remove require.js optimizer and then my build is not ok. Should I pass another uglify over it.
Any better solution? (don't make the pc to copy bower_components all over again, or I might change the position up to the root?)
Thanks
Well I don't need the devcode grunt task becasue requirejs already comes with uglify2 which allows you to have the dist.options.uglify2.compress.global_defs
If you put DEBUG = false then this code will be removed in production mode.
dist: {
options: {
baseUrl : '<%= yeoman.app %>/scripts/',
name : 'main',
mainConfigFile : '<%= yeoman.app %>/scripts/main.js',
out : '.tmp/concat/scripts/main.js',
optimize : 'uglify2',
uglify2: {
//Example of a specialized config. If you are fine
//with the default options, no need to specify
//any of these properties.
output: {
beautify: false
},
compress: {
global_defs: {
DEBUG: false
}
},
warnings : true,
mangle : true
},
}
},
In my project I use yeoman (1.0.6). In a fresh webapp copy installed requirejs-text plugin to include template.html.
main.js
require.config({
paths: {
jquery: '../bower_components/jquery/jquery',
text: '../bower_components/requirejs-text/text'
}
});
require(['jquery', 'text!../templates.html'], function ($, templates) {
....
After building and optimizing a whole project, I expect to have generated templates.js file instead of templates.html ( added
"optimizeAllPluginResources: true" as described here )
Gruntfile.js ( won't paste all code, just optimization settings )
....
requirejs: {
dist: {
options: {
baseUrl: '<%= yeoman.app %>/scripts',
optimize: 'none',
optimizeAllPluginResources: true,
preserveLicenseComments: false,
useStrict: true,
wrap: true
}
}
},
....
After grunt 'build' task is completed I see that template.html content is in main.js and there is no generated templates.js file
After adding (also have to set in copy task to copy requirejs-text plugin form app to dir folder ):
stubModules: ['text'],
exclude: ['text!../templates.html'],
files are excluded as expected, but there is still no templates.js file. ( get an error as expected: XMLHttpRequest cannot load file:///...../dist/templates.html. Cross origin requests are only supported for HTTP. it works fine with local HTTP )
My question is: What settings am I missing to generate templates.js file with a requirejs optimizer?
p.s. googled, spent all day, tried more than wrote here.
Thank You in Advance
The title says it all really. Despite trawling the internet I haven't found a single example of a solution to this problem.
Here are some near misses
https://github.com/amitayd/grunt-browserify-jasmine-node-example - grunt, browserify and jasmine
https://github.com/gotwarlost/istanbul/issues/59#issuecomment-18799734 - browserify and istanbul
Here is my in-progress code https://github.com/wheresrhys/on-guard/tree/browserify (note it's the 'browserify' branch - Gruntfile.js is a bit of a mess but will tidy it up shortly). My initial investigations using console.log indicate that somehow bundle.src.js is being loaded in the page but when the tests are run (and passed!) the code in bundle.src.js isn't being run, so I have a feeling it might be an aliasing problem... though one that's limited to phantomjs as when I open the specrunner in chrome the code is getting run.
I'm using grunt-browserify + browserify-istanbul + grunt-contrib-jasmine + grunt-template-jasmine-istanbul as solution. This solution has also excluded third party libraries when building source files using browserify.
Show the code first, I'll explain later,
grunt.initConfig({
browserify: {
// build specs using browserify
specs: {
src: ["spec/**/*Spec.js"],
dest: "spec/build/specs.js",
options: {
debug: true
}
},
// build source files using browserify and browserify-istanbul
dev: {
options: {
debug: true,
browserifyOptions: {
standalone: 'abc'
},
transform: [['browserify-istanbul', {
ignore: ['**/node_modules/**'], // ignore third party libs
defaultIgnore: true
}]]
},
src: ['abc.js'],
dest: 'dist/abc.js'
}
},
connect: {
server: {
options: {
port: 7000
}
}
},
// test using jasmine, generate coverage report using istanbul
jasmine: {
coverage: {
src: ['dist/abc.js'],
options: {
junit: {
path: 'bin/junit'
},
host: 'http://localhost:7000/',
specs: 'spec/build/specs.js',
keepRunner: true,
summary: true,
template: require('grunt-template-jasmine-istanbul'),
templateOptions: {
replace: false, // *** this option is very important
coverage: 'bin/coverage/coverage.json',
report: [
{
type: 'html',
options: {
dir: 'spec/coverage/html'
}
}]
}
}
}
}
grunt.registerTask('specs', ['browserify:specs', 'browserify:dev', 'connect', 'jasmine']);
The steps of generating istanbul coverage report can be concluded into three:
Instrument code
Run test
Generate coverage report
In our solution, we use browerify-istanbul in step 1, grunt-contrib-jasmine and runt-template-jasmine-istanbul in step 2 and 3.
browserify-istanbul will let you instrument code in browserify building step, in this way, we can easily ignore third party libs. But the grunt-template-jasmine-istanbul will instrument code again. To avoid this, you can set replace to false in the options.
Refs:
Istanbul steps
broswerify-istanbul
grunt-contrib-jasmine
grunt-template-jasmine-istanbul -- replace option
If I have a library that is being pulled down from cdn and wouldn't like it to be part of the final js file but be able to require it using browserify, how would I solve it?
Here is how I currently solve it using alias and a shim file.
browserify: {
options: {
debug: true,
transform: [ 'reactify' ],
alias: [
'client/shims/jquery.js:jquery'
]
},
app: {
src: 'client/app.js',
dest: 'public/app.js'
}
}
here is the shim file client/shims/jquery.js which I alias to jquery so I can use require('jquery') instead of the full path.
module.exports = $;
Is there a shortcut in grunt-browserify to support this scenario? I would like to know if it is possible to define it in Gruntfile.js without creating the shim file.
Adding external: [ 'jquery' ] seems to totally ignore it and doesn't work.
With browserify-shim you can add this in your package.json file:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "global:$"
}
Then jquery will be available in your modules via require('jquery')
If you load jQuery before the Browserify bundle on the page, $ will be available as a global.
I'm using Grunt for building my web project. I installed grunt-contrib-less package und added a task to my grunt.initConfig({..});
less : {
options: {
paths: ['js/base']
},
files: {
'js/base/*.css' : 'js/base/*.less'
}
}
when I run the target less via grunt less, it runs without errors but doesn't compile the less file to a css file.
Running "less:files" (less) task
Done, without errors.
I have installed the lessc package via node, too. Doing lessc <source> <dest> works fine.
Currently I have pointed with the files option directly to one dir which contains one less file for testing. Even if I write the whole file name into files option, it happens nothing...
Later on I want to scan the whole js directory and compile all new modified *.less files.
I have installed following versions:
grunt-cli v0.1.6
grunt v0.4.0
node v0.8.7
npm 1.1.49
BR,
mybecks
The glob pattern js/base/*.css does not match any files, therefore there is no destination. Usually, tasks like this expect multiple inputs to combine into a single output. Also, bear in mind that less is a multi-task, and putting files as a child of less is not doing what you expect. (it is treating it as a target, not a src/dest map)
If you want a 1-1 transform of .less into .css, you can use dynamic expansion. (or you can define each src/dest pair manually, but who wants to do that?)
In your case:
less: {
options: {
paths: ['js/base']
},
// target name
src: {
// no need for files, the config below should work
expand: true,
cwd: "js/base",
src: "*.less",
ext: ".css"
}
}
I used Anthonies solution but stil had an error
Warning: Object true has no method indexOf
If I changed the order putting expand true as second it gave me the error
Unable to read "less" file
where "less" was the value of the first item in my list.
I solved it by changing files into an array like this:
less: {
options: {
paths: ["js/base"]
},
files: [{
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}]
},
I used "grunt-contrib-less" : "^0.11.0"
This works for me, but modified to reflect this scenario:
less: {
options: {
paths: ["js/base"]
},
files: {
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}
},