javascript - How can I use grunt-uncss with an AngularJS application? -
javascript - How can I use grunt-uncss with an AngularJS application? -
my angularjs application composed 2 urls:
http://myapp/#/foo
http://myapp/#/bar
this simplified index.html file:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div ui-view></div> </body> <script type="text/javascript" src="script.js"></script> </html>
in add-on containing application logic, script.js
file contains html templates loaded via $templatecache service.
with http://myapp/#/foo
url, foo html template inserted in <div ui-view></div>
element. in same way, http://myapp/#/bar
url, bar html template inserted in <div ui-view></div>
.
what want utilize grunt-uncss task cut down style.css
size.
my first effort was:
uncss: { dist: { files: { 'style.css': [ 'index.html' ] } }
the style.css
file reduced, did not included styles required foo , bar pages.
my sec effort using deprecated urls
parameter loaded phantomjs:
uncss: { options: { urls; [ 'http://myapp/#/foo', 'http://myapp/#/bar' ] }, dist: { files: { 'style.css': [ 'index.html' ] } }
again, style.css
file reduced, did not included styles required foo , bar pages.
someone knows how solve problem?
does grunt-uncss work static content?
thanks in advance,
bernardo pacheco
specify html files, including views:
uncss: { dist: { options: { ignore: ['.ng-move', '.ng-enter', '.ng-leave', '.created_by_jquery'] }, files: { 'style.css': [ 'index.html', 'views/foo.html', 'views/bar.html' ] } } }
you can specify more 1 file of html, should include view files (in case foo.html , bar.html). also, utilize ignore alternative add together classes loaded @ runtime (do not exist in html files), i.e. created jquery, or nganimate if using one.
there more options, illustration can customize media queries should left after uncssing, please refer documentation provided authors - https://github.com/addyosmani/grunt-uncss.
javascript angularjs gruntjs
Comments
Post a Comment