In this tutorial we will build this workflow: use Sass to write the stylesheets, CoffeeScript for scripts, introduce asset pipeline (concatenation and minification) and live reload of the page whenever there is a change in source files. First you need to install Grunt for the command line as a global module, after which you have grunt command available globally. Run those tasks in the command line while you work.Create package.json and list dependencies (Grunt and plugins).Let’s first breakdown a typical workflow to get a big picture: cleaning and copying files and folders,.concatenation and minification of assets,.Sass, Less and CoffeeScript processing,.There are close to 4,000 Grunt plugins available for different tasks such as: Grunt’s functionality depends on plug-ins and those depend on your needs. All the configuration is done in regular Javascript (or CoffeeScript). Grunt.js uses power of Node.js to work and it runs from your command line. If you work in a team environment that means you can work with a set of unified commands and everyone will share a common workflow. The configuration takes some time to set up, needs some project and asset planning but it will save you a lot of time in the long-run. Doing this manually soon becomes tiring as you spend a lot of time on repetitive, menial tasks, AKA grunt work.Ī solution to that problem is to automate all menial tasks into automated Grunt tasks. Let’s say you’re a front-end developer and you use Sass, some CoffeeScript, need to minimize your stylesheets and scripts (asset compilation), and on top of that you want to see changes in real time in your browser whenever you change a source file. The project’s homepage lists many big players in software development that use Grunt in their development as part of continuous integration workflow. It runs custom defined repetitious tasks and manages process automation. The watch task within our gruntfile.js includes the livereload: true option, and watches all files in my project.Grunt is a command line Javascript task runner utilizing Node.js platform. We’re going to use the Grunt Watch plugin (actually named ”grunt-contrib-watch“) which you’ll need to load via NPM. Grunt is a JavaScript-based task runner, and you can use it to automate many of the tasks you’d normally take care of manually–including browser refreshing. If you’re comfortable using the command line I highly recommend taking a look at this option. The Command Line for Web Design: Live Reload & BrowserSync. If you’re using a browser extension, you may need to enter the extension settings to ensure that allow access to files is turned on. Get things going by inserting a JavaScript snippet in the files you’re working on, or use it in combination with the browser extension. It comes with apps for Mac OS and Windows, and costs (at time of writing) $9.99. LiveReload has been around for quite a while, and it’s a great tool. Let’s look at three tools which can take care of the whole refresh process for you, automatically. It may seem like a quick procedure, but add this refreshing action up over time and you’ll find it quite wasteful. Each time you make a change to your code you go back to your browser, hit refresh, and see your changes take effect. Let’s consider a typical front-end workflow: you have your code editor, perhaps you’re writing some HTML, then you have CSS which might involve Sass, and you have your browser for testing.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |