#Grunt minify css and js how to#
#Grunt minify css and js install#
#Grunt minify css and js manual#

The report doesn't show 'Minify CSS' as 'Opportunity' anymore, and has now moved to 'Passed Audits' section: Click on Performance and find the Opportunities section.Both files are much smaller, in particular, the animate.css has been reduced in ~26%, saving ~20KB! You can inspect these files, and see that the new versions don't contain any whitespaces. Select the Disable cache checkbox if it isn't already.Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.To inspect the size and content of the files: If you got lost in any previous step, you can click here, to open an optimized version of the site. Next, you'll check the result of this optimization with performance tools. This is how the resulting will look like: Take a look at the following CSS block: body ) ,ДЄfter making the changes a rebuild of the project will be triggered. In production, these characters can be safely removed, to reduce file size without affecting how the browser processes the styles. Grunt.registerTask( 'default', ) ДЄdd a script to my package.CSS files can contain unnecessary characters, such as comments, whitespaces, and indentation. 'themes/my-theme/source/css/modules/test.css' 'themes/my-theme/source/css/modules/styles.css', Require( 'matchdep').filterDev( 'grunt-*').forEach(grunt.loadNpmTasks)

#Grunt minify css and js install#

It turned out to be a really simple setup to add Grunt to my existing Hexo project:ДЄdd Grunt and some Grunt plugins to my project as dev dependencies: $ npm install grunt grunt-contrib-cssmin matchdep -save-devДЄdd a gruntfile.js to my project root folder and give it some code: // /gruntfile.js

#Grunt minify css and js manual#

Plus, why go manual when you can automate?

Manual tools as discussed here, which would have been fine given I donвЂ™t need to minify all that often, but it wouldnвЂ™t really let me work in multiple files as easily.

#Grunt minify css and js how to#

Webpack, seems like absolute overkill for what I need, and I already have a lot of experience with not being able to figure out how to get webpack to work рџҐґ.Gulp, didnвЂ™t choose it after reading this comparison which concludes Grunt is better for simple projects like mine.Grunt is a task runner that has a well-supported and well-documented module for minifying CSS. IвЂ™m actually not 100% positive I made the вЂњrightвЂќ choice here, but at the end of the day, it does exactly what I need it to do, and I didnвЂ™t want to quadruple my research time in order to optimize the decision. So I looked into some options and settled on using Grunt for the job. Frameworks like React make it easier for this to be the default way of writing CSS, but otherwise I didnвЂ™t know how I could do it.

The one area I hadnвЂ™t done this yet though was in my CSS. Working in some other projects I saw just how self- / user-friendly it is to break code into much smaller pieces, and got into the habit of working with small components across multiple files. LetвЂ™s not even think about performance (I didnвЂ™t рџ…). It would be insanely long and also pretty cumbersome to work with as the project grew bigger & bigger. In previous projects, IвЂ™ve pretty much always written one master CSS file for the whole project. I did this for a project which uses the Hexo static site generator. Today I learned how to use the Grunt task runner to compile multiple CSS files into one, and minify everything.