Run this command (in your project’s root directory) anytime you want Grunt to start watching your files. Now that everything is downloaded and configured, we simply need to run a single command to make Grunt start watching our files. It also tells Grunt to execute the tasks anytime the files are modified. This configuration file setups up a number of tasks for concatenating, compiling and minimizing the JS and LESS. Grunt.loadNpmTasks('grunt-contrib-watch') Grunt.loadNpmTasks('grunt-contrib-less') Grunt.loadNpmTasks('grunt-contrib-uglify') Grunt.loadNpmTasks('grunt-contrib-concat') "public/css/style.css": "less/style.less" The last thing we need to do is setup Grunt’s configuration file.
#Prepros vs gulp download#
This will download all the packages we specified above and place them into the node_modules directory in your project’s root.
#Prepros vs gulp install#
Now that we’ve configured our package.json file with the packages we need, let’s install them. If this file already exists, just add the entries in the dependencies section. You’ll need to create a package.json file with the contents below. Now we need to configure the necessary packages so that all the Grunt plugins we need will be downloaded. Configure NPM’s package.json with Grunt Plugins
(After the installation is complete, you may need to exit your terminal window and reopen it again to gain access to the “grunt” command.) 3. You can do that by running this command: sudo npm install -g grunt-cli Install Gruntīecause you’ll be using Grunt a lot, it’s easiest to just install it globally. This will also install NPM (the Node.js Package Manager). (Note: I know this seems like a lot of steps, but often times many of them are done already - especially if you’re working on a Node.js project)Įven if your project isn’t written in Node.js, you’ll need it to access these tool. In Grunt, however, we need to explain these procedures via a configuration file. CodeKit would start watching the files and automatically recompile. You’d configure some options and set the output paths, then you’d be good to go. In CodeKit, you’d drag this whole folder into your window. less files) and compiles down into /public/css/style.css.
We also have a style.less file (that imports the other underscored.
We have 3 JavaScript files in the /javascript directory that need to be combined and minified into /public/js/. Suppose we have a project using JavaScript and LESS. You’ll be able to reuse many of the same build tasks and it’ll allow other developers (who may not have CodeKit installed) to easily follow the same workflow when they open your project. Given that Grunt has these features, once it’s integrated into a project, it makes sense to leverage it for the real-time compiling and reloading of JS/LESS/SASS files. It also has a package for watching files (the same way CodeKit does) and firing off certain tasks when they’re modified. Grunt is a task runner that has a ton of packages for doing things like compiling LESS/SASS into CSS, concatenating JavaScript, minifying, etc. With that said, I’ve found myself doing lots of Node.js development lately and have been using Grunt for various building tasks. It’s served me well for years and I continue to use it on many of my projects. Let me start by saying that I’m a big fan of CodeKit.
0 kommentar(er)
