Home › Forums › JavaScript › Using Gruntfile.js?
- This topic is empty.
-
AuthorPosts
-
April 11, 2014 at 7:26 pm #168007Steven MorganParticipant
Hey guys, I’ve gotten on the Grunt train and liking it.
I was just wondering what are some of the best practices when using it? As far as combining files? Also, what are some must use plugins?
I will use it mostly for WordPress, so far I run uglify, sass, and watch in it.As for handling files I’m wondering what you do? Do you concatenate and combine all of your JS files into one? Or have a global.js and then conditional JS files?
So best practices and must have plugins, or anything else Grunt related.
ThanksApril 14, 2014 at 12:27 am #168080ChromawoodsParticipantPlugins totally vary depending on the size and complexity of the project. The ones I usually use regardless are:
jshint, concat, uglify, sass
andwatch
And then as the project grows, more might be needed (I probably forgot some):
bump
– for better controlling the version of your app
yuidoc
– if more devs are working on the same project, documentation is nice
copy
– depending on different vars or environments, sometimes you don’t want to process a file, just copy it to another location
replace
– I sometimes use this to replace strings in my JS-config module. For example, it can replace something likedevMode = %DEV_MODE%;
todevMode = true;
depending on Grunt params
newer
– only operate on src files that have actually changed
imagemin
– optimize imagesApril 16, 2014 at 12:56 am #168160jamygoldenMemberTo add to that list, at times I also use:
Connect – Runs an html file server
Clean – Empty’s a folder. Useful for when you have different production and development folders. I generally use this with the copy task mentioned above.
Requirejs – Compiles require js
Replace – Replaces text in files. I’ve used this before to swap out the html requirejs script include with the compiled version for production.April 18, 2014 at 6:37 am #168265dgrieselParticipant@TheDoc: I had the same problem with gulp, my solution was naming the files in the order they had to be compiled:
01 - util.coffee 02 - some-more-shared-stuff.coffee ... 11 - page-specific-1.coffee 12 - page-specific-2.coffee ... 99 - top-level_depends-on-everything-else.coffee
Maybe that’s a solution for you?
April 21, 2014 at 10:30 pm #168409jamygoldenMemberHey guys :)
@TheDoc yeah I think that’s a good article idea. I’ll see if I can get that done this week. I’ll reply to this thread today with the basic steps and you guys can let me know if anything is too confusing. Do you use requirejs usually or just not with coffeescript? I don’t use coffeescript myself.April 25, 2014 at 2:31 am #168658jamygoldenMemberFirst to get requirejs working:
Link to require script in HTML:
<script data-main="js/config" src="js/vendor/require.js"></script>
js/config points to the js/config.js file and the src points to the requirejs lib.config.js:
require.config({ baseUrl: 'js', deps: ['main'], shim: { // Assuming you have global plugins 'vendor/jquery': { exports: '$' } } });
main.js
require([ 'example' ], function (example) { example.init(); });
example.js
define(function () { var example = { init: function() { alert('Example ran'); } }; return example; });
Your require scripts should be working within the browser
As for Grunt:
Assuming you have a project set up as follows:
- GruntFile.js - package.json - js - config.js - main.js - vendor - almond.js - jquery.js
https://github.com/jrburke/almond
You can pretend that almond is part of requirejs. It allows for require to compile to a js file that is completely independant of require (how I imagine most people think it should be anyway).The requirejs npm grunt package should be added to grunt correctly. https://www.npmjs.org/package/grunt-contrib-requirejs
In case anyone is confused about as to how it’s done, check out https://css-tricks.com/grunt-people-think-things-like-grunt-weird-hard/
Add the following to the to thedevDependencies
object in the package.json file:
"grunt-contrib-requirejs": "^0.4.3",
requirejs: { compile: { options: { baseUrl: 'js', // relative to GruntFile.js name: 'vendor/almond', // relative to baseUrl deps: ['main'], // relative to baseUrl mainConfigFile: 'js/config.js', // relative to GruntFile.js optimize: 'uglify', out: 'js/site.js' // relative to GruntFile.js } } }
Running grunt should create a js/site.js file. You now point you script to that file for production use.
I’ll create a quick github repo with a working example of all of this. Let me know if anything is confusing.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.