package - How not to repeat code using Bower and Gulp? -
i use bower manage front end packages on project , gulp minify , create single file css , js packages. saves file on assets
folder, files on html.
right now, bower list
├── cssfx#0.9.6 ├── font-awesome#4.3.0 ├── jquery#2.1.3 ├─┬ jquery.cookie#1.4.1 │ └── jquery#2.1.3 ├── jquery.ellipsis#0.7.1 ├── normalize.css#3.0.3 └─┬ semantic-ui#1.12.0 └── jquery#2.1.3
as can see, have semantic ui
, normalize.css
installed. problem semantic ui
uses normalize.css
reset, normalize.css
included in semantic ui
code. on css file generated gulp, normalize.css
included twice, problem because:
- the code repeating, making file bigger
semantic ui
usesnormalize.css v3.0.1
, ,normalize.css
installed bowerv3.0.3
this first time happens me, let's use package includes package have installed, , situation same above. believe solution have valid packages.
is there way remove automatically repeated code? in case above, remove normalize.css
semantic ui
, use installed normalize.css
package?
if can't done, way remove repeated code manually or there's package manager bower or gulp has feature?
there gulp task named gulp-minify-css acts wrapper clean-css: https://github.com/jonathanepollack/gulp-minify-css
for grunt, clean-css wrapper named grunt-contrib-cssmin: https://github.com/gruntjs/grunt-contrib-cssmin
the underlying module (clean-css) different simple minification in there options combine property declarations , eliminate declarations overridden later ones. haven't tested myself, imagine eliminate redundancies in css caused double inclusion of (almost) same file.
however, doesn't address problem.
in case, should remove standalone normalize.css. if included before semantic ui, largely, if not entirely, overridden semantic ui , own copy of normalize.css. if it's included afterwards, resetting things defined semantic ui, , don't want either.
generally, if framework includes normalize.css, intended used no other frameworks. (i.e. wouldn't use foundation 5 , semantic ui @ same time.)
when concatenate css, include global frameworks first (semantic ui) add other things icon packs, sliders (such slick.js), mobile navigation patterns (slidebars.js), etc.
if using semantic ui , decide foundation (or other framework) has nice feature want use, find frameworks have css , js broken down individual components too. include css file specific feature interested in. in case, there should no duplicate code, although namespace conflicts possible.
also, if you're concerned missing out on v3.0.3 of normalize.css because semantic has v3.0.1 included, imagine there's hardly difference.
Comments
Post a Comment