It needs a file there named package. You can just create one and put it there. Feel free to change the name of the project and the version, but the devDependencies thing needs to be in there just like that. This is how Node does dependencies. You could even think of it a bit like a plug-in for WordPress. Terminal rubes like me do it like this:. The last installation step is to install the Grunt CLI command line interface. It is a separate installation for efficiency reasons. You should close and reopen the terminal as well. Kinda like restarting your computer after you install a new application was in the olden days.
Grunt for People Who Think Things Like Grunt are Weird and Hard ◆ 24 ways
In production, we would concatenate all those files together for performance reasons one request is better than three. We need to tell Grunt to do this for us. Remember Grunt is a task runner. The tasks themselves we will need to add. The official Grunt plug-in for concatenating files is grunt-contrib-concat. A neat thing about doing it this way: Open it up and check it out. To use it we need to start configuring Grunt and telling it what to do. You tell Grunt what to do via a configuration file named Gruntfile. Just like our package. Just check out the format:. Now we need to create that configuration.
The documentation can be overwhelming. It will be created when this task runs and squishes all the files together. The intention is to focus in on the important bits, but it can be confusing at first to see how a particular chunk fits into the larger file. If you ever get confused and need more context, refer to the complete file. With that concat configuration in place, head over to the terminal, run the command:. This was a big aha! Feel the power course through your veins. We have so much prep work done now, adding new tasks for Grunt to run is relatively easy.
Why use Grunt?
We just need to:. The official plug-in for minifying code is grunt-contrib-uglify. Just like we did last time, we just run an NPM command to install it:. The official image minification plug-in for Grunt is grunt-contrib-imagemin. But there are a couple of things we can get smarter on and make things easier on ourselves, as well as Grunt:. We can do this by watching files. We can tell Grunt to keep an eye out for changes to specific places and, when changes happen in those places, run specific tasks.
- The World According To Me.
- The History of England, From the Accession of James II (Volume 1 of 5)?
- 50 Leadership Principles PART I: How to position YOUrself for success.
- Choral Prelude and Fugue in A Minor (O Traurigkeit, O Herzeleid), WoO 7;
- Anonymouse, Part Two: Courage & Conviction (The Exceptional Escapades of Miles Ovalbum Book 2)?
Feels pretty comfortable at this point, hey? The only weird bit there is the spawn thing. And you know what? From what I understand from the documentation it is the smart default. That might look like this in the terminal:. Usually Grunt is pretty good about letting you know what happened, so be sure to read the error message.
- The Sand Fish: A Novel from Dubai!
- Navigation menu!
- The Namedropper.
- Succubus at the Big Box.
In this case, a syntax error in the form of a missing comma foiled me. Adding the comma allowed it to run. The last thing on our list from the top of the article is using Sass — yet another task Grunt is well-suited to run for us. So for our little project we can just have it compile our main global. Now, every time we change any of our Sass files, the CSS will automaticaly be updated. Page refreshes happen automatically and in the case of CSS , new styles are injected without a page refresh handy for heavily state-based websites.
First Moments with Grunt. As you might imagine, there is a lot of leveling up you can do with your build process. It surely could be a full time job in some organizations. Some hardcore devops nerds might scoff at the simplistic setup we have going here. Even what we have done so far is tremendously valuable. I think some group sharing would be a nice way to wrap this up.
- Chocolate in My Pocket?
- Grunt for People Who Think Things Like Grunt are Weird and Hard!
If you are installing Grunt for the first time or remember doing that , be especially mindful of little frustrating things you experience d but work ed through. Those are the things we should share in the comments here. That way we have this safe place and useful resource for working through those confusing moments without the embarrassment.
The configuration of the plug-ins is the important part of using Grunt. Each plug-in is a bit different, depending on what it does. That means a uniquely considered UI for every single plug-in, which is a long shot.
Perhaps a decent middleground is this Grunt DevTools Chrome add-on. Chris Coyier is a web designer and developer living in Milwaukee. He writes about all thing web at CSS -Tricks , talks about all things web at conferences around the world and on his podcast ShopTalk with Dave Rupert, and co-founded the web coding playground CodePen. Like most tasks, the grunt-contrib-uglify plugin's uglify task expects its configuration to be specified in a property of the same name. Here, the banner option is specified, along with a single uglify target named build that minifies a single source file to a single destination file.
Many commonly used tasks like concatenation , minification and linting are available as grunt plugins. As long as a plugin is specified in package. You can configure Grunt to run one or more tasks by default by defining a default task. In the following example, running grunt at the command line without specifying a task will run the uglify task.
This is functionally the same as explicitly running grunt uglify or even grunt default. Any number of tasks with or without arguments may be specified in the array. If your project requires tasks not provided by a Grunt plugin, you may define custom tasks right inside the Gruntfile. For example, this Gruntfile defines a completely custom default task that doesn't even utilize task configuration:. Custom project-specific tasks don't need to be defined in the Gruntfile ; they may be defined in external.
Getting started Grunt and Grunt plugins are installed and managed via npm , the Node. How the CLI works Each time grunt is run, it looks for a locally installed Grunt using node's require system. Working with an existing Grunt project Assuming that the Grunt CLI has been installed and that the project has already been configured with a package. Change to the project's root directory.
Install project dependencies with npm install. Run Grunt with grunt. Preparing a new Grunt project A typical setup will involve adding two files to your project: There are a few ways to create a package. Most grunt-init templates will automatically create a project-specific package. The npm init command will create a basic package. Start with the example below, and expand as needed, following this specification. For example, this will install the latest version of Grunt in your project folder, adding it to your devDependencies: As seen in the following example installing the JSHint task module: The Gruntfile The Gruntfile.
A Gruntfile is comprised of the following parts: The "wrapper" function Project and task configuration Loading Grunt plugins and tasks Custom tasks An example Gruntfile In the following Gruntfile , project metadata is imported into the Grunt config from the project's package. The "wrapper" function Every Gruntfile and gruntplugin uses this basic format, and all of your Grunt code must be specified inside this function: Custom tasks You can configure Grunt to run one or more tasks by default by defining a default task.
For example, this Gruntfile defines a completely custom default task that doesn't even utilize task configuration: Further Reading The Installing grunt guide has detailed information about installing specific, production or in-development, versions of Grunt and grunt-cli. The Configuring Tasks guide has an in-depth explanation on how to configure tasks, targets, options and files inside the Gruntfile , along with an explanation of templates, globbing patterns and importing external data. The Creating Tasks guide lists the differences between the types of Grunt tasks and shows a number of sample tasks and configurations.
For more information about writing custom tasks or Grunt plugins, check out the developer documentation. Found an error in the documentation?