Add Sass, Watch, Livereload and Notify to Gruntfile

[lewismorris]

Hey Guys,

I've dropped in the Sass compiler inside a watch task along with Livereload and Notify.

Let me know of any feedback.

[markgoodyear]

Hey @lewismorris,

I'd suggest adding in matchdep to save adding the node modules manually in the Gruntfile.

What do you think on these options too:

• Autoprefixer—awesome tool, saves using mixins for generating vendor prefixes
• JSHint
• Concat JS files (either from a folder or add manually to the Gruntfile to control the order)
• Uglify (minify)
• Image compression

I've a repo with all that set up if you want nick things out of it :)

[lewismorris]

Hey @markgoodyear

I'll take a look at matchdep.

• Would this not be best being left to something like Bourbon when writing your css?
• All the others are in line to be brought added in the future

Between myself, @Passenger-Inspired and @timgale we agreed on trying to use as many grunt-contrib plugins as possible, not sure what your thoughts are on this? We come to the conclusion this would be the most future proof method as these plugins appear to be better maintained.

[markgoodyear]

Regarding Autoprefixer, I thought that at first, changed my mind when I tried it. It allows to write native CSS, and Autoprefixer just appended the necessary browser prefixes. If a prefix is no longer required, it won't add them in. You can configure how far back to support too which is great.

Yeah I try to use grunt-contribs as much as possible, though I see no harm in using others too. Often well supported if any issues are there.

[lewismorris]

Hey Guys,

Any more feedback? Be good to make a start on merging back into the main boilerplate.

[jonspark]

Not familiar with what's being discussed but, from the sounds, there could be some crossover with #12 on the JS side of things.

I know it's a bit early to be talking the cut-down version of the rules, but this seems pretty advanced for anyone not FE-focussed. How far would this be taken with a server-side dev?

[BenjaminRCooper]

@jonspark - not at all mate.

Myself, @lewismorris and @timgale are just making a start on some of the tooling required for the boilerplate.

We are looking to implement base files and workflows for Grunt, Require JS and Bower.

B

[markgoodyear]

Hey guys,

Just want to share some findings regarding a Sass set-up.

Currently I have Sass being compiled to global.css. This is then ran through Autoprefixer too automatically add in vendor prefixes—should they be needed. After this, it is then minified by CSS min to global.min.css.

This means there is a uncompressed and compressed version generated. I find this useful when developing in WordPress as I use a switch to detect the environment and load in the .min.css version on the live server, and .css for dev, meaning I can just run grunt watch and forget about running a dev/production task to minify. The minifying can be also done in a separate production task though.

Any thoughts?

[BenjaminRCooper]

Morning guys,

Hope you are both well.

@lewismorris - This is a great start mate, I think this is good to merge. @timgale do you agree?

@markgoodyear - Thanks for this, this sounds like something we should definitely have in our document. Do you think you could look to incorporate this into the boilerplate? Just one thing to add, we are going to use main.min.css and main.css.

With regards to moving forward, I would like to see if we can add the following;

• https://npmjs.org/package/grunt-newer
• https://github.com/EightMedia/styleguide.js

What you guys think?

B

[markgoodyear]

Hey Ben,

Sure, I'll wait on a merge before implementing. Switched over to use main instead of global too.

Regarding JS concat/minify, what do you prefer:

1. Concat and minify a folder
2. Specify in the Gruntfile files to be concatenated and minified

I've tried both ways, so far using number 2 so I can specify order of the scripts. A little more maintenance as a downside though.

I've not tried those two plugins, but I'll check them out :)

Mark

[timgale]

Morning chaps

This is looking good to me.

One area I would say requires more attention is, as @markgoodyear brought up, image compression. I think it would be worth adding in the ImageOptim plugin, as this also provides support for ImageAlpha and JPEGmini.

+1 for @Passenger-Inspired's suggestion of adding Grunt Newer to help with performance.

Tim

[markgoodyear]

Grunt newer might not be needed as watch can do this too: https://github.com/gruntjs/grunt-contrib-watch#compiling-files-as-needed. Might try that as it's only really JS files that need it when being linted, I think?

For image optimisation, I use the "contrib" plugin imagemin which does gif, jpg, png (transparency supported too). It's also clever enough not to compress the same image if it's already been compressed. I'm not sure the differences between the two plugins are.

[BenjaminRCooper]

@timgale, @lewismorris - What are your thoughts regarding Mark's work?

@markgoodyear - Great stuff mate, +1 from me.

B