{"id":819,"date":"2016-01-11T07:24:05","date_gmt":"2016-01-10T22:24:05","guid":{"rendered":"http:\/\/n8finch.com\/?p=819"},"modified":"2016-08-25T11:03:28","modified_gmt":"2016-08-25T02:03:28","slug":"learning-new-things-grunt","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/learning-new-things-grunt\/","title":{"rendered":"Learning New Things: Grunt"},"content":{"rendered":"
I’m still getting a handle on Grunt. As far as a build tool, I’ve not yet been able to wrap my head completely around it.<\/p>\n
Maybe I need a better tutorial, or maybe I just need to not get hung up on any task runner that isn’t working right (looking at you, livereload<\/em><\/strong>!).<\/p>\n I’ll get it figured out. I usually do:-).<\/p>\n Until then, I wanted to make some notes about what I’d see so far, and what I’ve done. I had some help from the Grunt documentation<\/a><\/strong>, as well as some good tutorials<\/a><\/strong>. This isn’t a tutorial, just some notes. If you’re looking for how-tos, follow\u00a0the links…<\/p>\n So,\u00a0for anyone who’s new, you’ll want to install Grunt globally and on a per-project basis. The global install gets you the Grunt command line interface (cli) (which is Nice.<\/p>\n Like WordPress plugins, it’s easy to get a little trigger happy with plugins. They let you do extra tasks you couldn’t before and it’s just a command away.<\/p>\n Whenever installing Grunt plugins to the project, you want to make sure to post fix Here are some plugins I’ve installed and have been trying to get to work (with more success than not):<\/p>\n These are just a few of the thousands of plugins<\/a><\/strong> available for Grunt.<\/p>\nInstalling Grunt and Extras<\/h2>\n
npm install -g grunt-cli<\/code>), and then grunt installation per project allows you to run the tasks you (or someone else!) has set up. Pretty sweet that someone can compile a whole set of tasks for you to run, and all you have to do is
npm install<\/code> and then run
grunt<\/code>.<\/p>\n
Installing Grunt Plugins<\/h2>\n
--save-dev<\/code> to the end of the install command. This will keep all of the plugins listed in the dev dependencies section of your package.json file.<\/p>\n
npm install grunt-contrib-sass --save-dev \/\/installs Sass compiler\r\nnpm install grunt-contrib-watch --save-dev \/\/installs the watch which, yes, watches for changes in specified files.\r\nnpm install grunt-autoprefixer --save-dev \/\/install the autoprefixers for different browsers so you don't have to worry about prefixing in CSS \r\nnpm install grunt-reload \/\/installs the live reload, or at least is supposed to... \r\nnpm install grunt-contrib-connect --save-dev \/\/install the companion for live reload, which I can't get to work... yet! \r\nnpm install grunt-contrib-concat --save-dev \/\/install the ability to concatenate files, like javascript and CSS files, into one massive file.<\/pre>\n
Configuring All the Tasks<\/h2>\n