![]() ![]() Dunno how it will behave in bigger projects but that’s enough experimentation for now. With this new task, what it’s doing is checking the list of files changed that the watcher (grunt.regarde) detected against your patterns in the config, and then for any matches it runs the appropriate tasks. Grunt.registerMultiTask 'reloadDispatcher', 'Run tasks based on extensions.', () -> You could make your package.json even better by specifying livereload in its own 'devDependencies' object if you're so inclined. If you want to keep it all in one process, you can do this: In the Adding the connect and open task and Adding the concurrent task recipes of this chapter, you can find how to get a live preview of your changes to. Obvi you want grunt (duhhh), livereload, connect seems to help with mounting folders, and regarde is like grunt-watch, it just seems to work better (I forget why exactly). A solution exist to add the livereload js in your Wordpress automatically (in function. Now if you edit a watched file, the page should update accordingly. This is needed if you are using Grunt, grunt-contrib-watch and the livereload. Start the grunt watch task, open your site on localhost, and click on the icon in your browser. This simple plugin enqueues livereload.js into your theme and admin template. You can’t run two watch tasks concurrently though, unless you open another terminal session. Then I use the livereload plugin for firefox (or chrome or safari). More informations LiveReload: npm install -g livereload To make sure that the liveReload is well installed, livereload -v should output the version something like : 0.7. Makes sense really, it’s not watching during the task run so it misses it. You can use grunt clean:prince to removes the theme related static files in the pub/static and var directories. Rather than compiling the Coffeescript, SASS and HAML, followed by a LiveReload, the watch event doesn’t pick up the changes to the HTML, CSS and Javascript so that reload never happens. # Examples in Coffeescript, that's how I roll. There’s a problem though: if your HTML, CSS and JS is all generated from HAML, SASS and Coffeescript like me, it doesn’t work like you’d expect it to: It has this ridiculously cool feature that allows you to watch files for changes and then tell every browser looking at your webpages to refresh - mobile, tablet, desktop, whatever - and it does this without browser extensions. Getting Started First, install this grunt plugin next to your projects grunt.js gruntfile with: npm install grunt-livereload Second, add this line to your projects grunt.js gruntfile: grunt. Once all that is done, let’s do the actual minification. Install it using the npm install grunt-contrib-cssmin -save-dev command and add it as a requirement by placing grunt.loadNpmTasks ('grunt-contrib-cssmin') in your Gruntfile. Grunt is an excellent automation tool and part of the Yeoman toolset. If you want to minify those resulting CSS files you’ll need the grunt-contrib-cssmin module. Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and yeoman. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |