ben-eb / gulp-uncss Goto Github PK

I am trying to use uncss on a laravel project where all the web files have an extension "blade.php" but I get errors if I use the following code:
gulp.task('uncss', function() { gulp.src('build/css/myscss.min.css') .pipe(uncss({ html: ['index.blade.php','contact.blade.php'] })) .pipe(gulp.dest('dest')); });
If I change the "html" to files, I get the same error. What syntax do I need in order to get uncss to work with these file extensions.

Many thanks

Paul

Условие /*! uncss:ignore */ не работает в таком примере:

/*! uncss:ignore */
@Keyframes warp {
from {
opacity: 0;
transform: rotate(-60deg) translateZ(-300px)
}
to {
opacity: 1;
transform: rotate(60deg) translateZ(300px)
}
}

It would be awesome to e able to use a 'Url:' option instead of 'html' so I could use this with Wordpress generated pages :)

BTW - thanks for this plugin

Does the gulp plugin allow for this functionality? It doesn't seem to be doing anything for me.

/* uncss:ignore /
.selector1 {
/ this rule will be ignored */
}

C:\webapp>npm install --save-dev gulp-uncss
\

[email protected] install C:\webapp\node_modules\gulp-uncss\node_modules\uncss
node_modules\phridge\node_modules\phantomjs
node install.js

Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-wind
ows.zip
Saving to C:\DOCUME1\ADMINI1\LOCALS~1\Temp\phantomjs\phantomjs-1.9.8-windows.z
ip
Receiving...

Error making request.
Error: connect ETIMEDOUT
at exports._errnoException (util.js:746:11)
at TCPConnectWrap.afterConnect as oncomplete

Please report this full log at https://github.com/Medium/phantomjs
npm ERR! Windows_NT 5.1.2600
npm ERR! argv "D:\software\nodejs\node.exe" "D:\software\nodejs\node_mod
ules\npm\bin\npm-cli.js" "install" "--save-dev" "gulp-uncss"
npm ERR! node v0.12.0
npm ERR! npm v2.5.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! This is most likely a problem with the phantomjs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get their info via:
npm ERR! npm owner ls phantomjs
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\webapp\npm-debug.log
help!

Hello!

I would very much like to use this gulp plugin for my AngularJS application. Due to its nature there are many HTML templates for different modules, directives and views. It's therefore impractical for me to generate a list of filenames and I would appreciate it if I could just use a glob instead, e.g. app/**/*.html.

What do you think? :)

Would it be possible to reference the raw html of a file in the stream to use? This would be very useful in cases where I have my html and css mixed in a stream.

Not sure why it's doing this, or if I'm doing something the wrong way:

gulp.task('less', function () {
  gulp.src('source/public/less/**/*.less')
    .pipe(plugins.less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(plugins.uncss({
      html:['source/index.html']
    }))
    .pipe(gulp.dest('source/public/css'));
});

I would think it would convert the less into css in-stream (which works) and push it to uncss before going to the destination. (the plugin thing is because I'm using gulpLoadPlugins). Instead, it's throwing an error:
[gulp] Error in plugin 'gulp-uncss': UnCSS: could not open /Users/my-name/Desktop/source/assets/css/main.css

The weird thing is that there is no folder "assets" nor is it mentioned anywhere in my gulpfile.js.

Can uncss play well with a project that uses jade templates? I'm using https://github.com/keystonejs/keystone and the jade templates get compiled on the fly by the server (index.html etc). Anyway to integrate uncss into this flow?

perhaps by pinging the locally running server? but then we get a chicken and egg issue.

I've converted these Grunt instructions over to Gulp: https://gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/

I'm able to create a sitemap.json and parse it, but when I run gulp uncss I get a bajillion select: Invalid argument errors.

// Generate Sitemap JSON
gulp.task('sitemap', shell.task(['curl --silent --output sitemap.json http://dev.foo.org/\?show_sitemap']));

// Remove Unused CSS (use after running `gulp sitemap`)
gulp.task('uncss', function() {
    return gulp.src('css/dist/style.css')
        .pipe(uncss({
            html: JSON.parse(require('fs').readFileSync('sitemap.json'))
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest('css/dist/uncss'));
});

It seems to work fine with just a couple pages to watch, but when I add in the JSON array of hundreds of pages (articles) it starts throwing that error like crazy (maybe thousands of times?).

Do you know what this select: Invalid argument error might be?

Eventually it errors out with:

...
select: Invalid argument
select: Invalid argument
phantomjs(31121,0x11f428000) malloc: *** error for object 0x105193f60: pointer being freed was not allocated
*** set a breakpoint in malloc_error_break to debug
select: Invalid argument
select: Invalid argument
select: Invalid argument

/Users/cory/Desktop/vip-quickstart/www/wp-content/themes/vip/foo/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
        fn = function () { throw arg; };
                                 ^
Error: Cannot load http://dev.foo.org/cats/kittens-are-cute/: Phantomjs returned status fail

Not sure if this is a problem with PhantomJS or what. I'd appreciate any insight. Thanks!

For http://example.com different html and js is rendered for mobile and desktop version. So is it possible to change page user agent as we do in phantomJS?

That's how my gulp task looks like http://c2n.me/3sbh9c6.jpg
Source map gives far from correct result. I tried to place unss after destination of maps, where the blue arrow points.
Only disabling uncss lets perform correct sourcing.

Could you give me a hand, please?

If there's no stylesheets found there is an unhandled error returned.

Accordding to the docs:

Note that options.ignoreSheets is already defined for you. gulp-uncss will only process CSS files in the stream.

There are some cases, where it makes sense to define ignoreSheets again and explicitly. For example, when stream contains css which should not be processed by gulp-uncss but processed my gulp-mincss, both within the pipe.

stream.src(..)
.pipe(mincss)
.pipe(uncss(ignoreSheets(ignoreSheets: regex));

So please provide the 'ignoreSheets' property within your gulp-uncss.

Thanks in advance!

Running the following code with version 1.0.4 of uncss and 3.9.0 of Gulp.

var gulp = require('gulp')
    , uncss = require('gulp-uncss')

    gulp.src(paths.src.style)
        .pipe(concat('style.css'))
        .pipe(uncss({
            html: ['./public/**/*.html']
        }))
        .pipe(gulp.dest(paths.dst.style))

Stacktrace:

/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
        fn = function () { throw arg; };
                           ^
TypeError: Cannot read property 'map' of undefined
    at getHTML (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:28:28)
    at /Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:221:20
    at /Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/using.js:165:30
    at tryCatcher (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._settlePromiseFromHandler (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:503:31)
    at Promise._settlePromiseAt (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:577:18)
    at Promise._settlePromises (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:693:14)
    at Async._drainQueue (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:123:16)
    at Async._drainQueues (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/thomas/Dropbox/dev/thomasdezeeuw.nl/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:15:14)
    at processImmediate [as _immediateCallback] (timers.js:368:17)

Maybe I should report this issue at uncss repo?

When I am trying to run gulp-uncss I am running into error
Error: PhantomJS: Cannot open about:blank

A quick google search shows that this was a widely reported uncss issue which was resolved in version 0.13 of uncss. However current gulp-uncss version is still using 0.12.1 version of uncss. Is there any plan to upgrade to latest uncss version in gulp-uncss soon?

Reference: uncss/uncss#150

Stack trace:

.../node_modules/bluebird/js/main/async.js:43
        fn = function () { throw arg; };
                           ^
Error: PhantomJS: Cannot open about:blank
    at reject (.../node_modules/gulp-uncss/node_modules/phridge/lib/phantom/start.js:71)
    at :4
    at :/modules/webpage.js:281
    -----------------------------------------------------------------------
    at Phantom._send (.../node_modules/gulp-uncss/node_modules/phridge/lib/Phantom.js:165:20)
    at Page.run (.../node_modules/gulp-uncss/node_modules/phridge/lib/Page.js:62:25)
    at .../node_modules/gulp-uncss/node_modules/uncss/src/phantom.js:125:21
    at tryCatchReject (.../node_modules/when/lib/makePromise.js:845:30)
    at runContinuation1 (.../node_modules/when/lib/makePromise.js:804:4)
    at Fulfilled.when (.../node_modules/when/lib/makePromise.js:592:4)
    at Pending.run (.../node_modules/when/lib/makePromise.js:483:13)
    at Scheduler._drain (.../node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (.../node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (node.js:370:9)
    at process._tickCallback (node.js:401:11)

Hi,

app structure:

app/
     |-  _assets/
     |   |-  css/
     |   |   |- main.css
     |   |-  img/
index.html

gulp config:

gulp.task('uncss', function () {
  return gulp.src('app/_assets/css/main.css')
    .pipe($.uncss({
      html: ['app/index.html']
    }))
    .pipe(gulp.dest('./uncss'));
});

html:

<head>
...
<base href="/">
<link rel="stylesheet" href="_assets/css/main.css">
...
</head>

here is the error stack race:

$ gulp uncss
[14:10:36] Using gulpfile c:\_dev\_labs\sp-build-with-server\gulpfile.js
[14:10:36] Starting 'uncss'...

child_process.js:933
  var r = this._handle.spawn(options);
                       ^
TypeError: Bad argument
    at ChildProcess.spawn (child_process.js:933:24)
    at exports.spawn (child_process.js:733:9)
    at spawnPhantom (c:\_dev\_labs\sp-build-with-server\node_modules\gulp-uncss\node_modules\uncss\node_modules\node-phantom-simple\node-phantom-simple.js:70:23)
    at Object.exports.create (c:\_dev\_labs\sp-build-with-server\node_modules\gulp-uncss\node_modules\uncss\node_modules\node-phantom-simple\node-phantom-simple.js:201:5)
    at c:\_dev\_labs\sp-build-with-server\node_modules\gulp-uncss\node_modules\uncss\lib\phantom.js:37:21
    at Object.async.whilst (c:\_dev\_labs\sp-build-with-server\node_modules\gulp-uncss\node_modules\uncss\node_modules\async\lib\async.js:663:13)
    at init (c:\_dev\_labs\sp-build-with-server\node_modules\gulp-uncss\node_modules\uncss\lib\phantom.js:34:18)
    at fn (c:\_dev\_labs\sp-build-with-server\node_modules\gulp-uncss\node_modules\uncss\node_modules\async\lib\async.js:626:34)
    at Object._onImmediate (c:\_dev\_labs\sp-build-with-server\node_modules\gulp-uncss\node_modules\uncss\node_modules\async\lib\async.js:542:34)
    at processImmediate [as _immediateCallback] (timers.js:336:15)

any ideas?
thanks in advance

Trying to see if I can select all HTML files within a folder for the html parameter instead of having to manually add every HTML file I create to the gulpfile.

I've tried: html: ["./dist/*"] and html: ["./dist/*.html"] but those aren't working. I checked to make sure html: ["./dist/index.html] works just to be sure I set everything else up right, and that did work.

Hi,

Maybe I'm doing it wrong but I can't seem to get the ignore option working (v1.0.0 and v1.0.3), I'm using it as follows:

.pipe(uncss({
  ignore: ['.active'],
  html: [
    paths.serve + '**/*.html'
  ] 
}))

I use httpster to start a local server and would like to provide "http://0.0.0.0:3333/" as files in the first paramaters of uncss(), but it is not allowed in gulp-uncss. My project is a single page app, therefore uncss has to go through all the js files which is indexed with absolute path relative to the build root.
I believe this is allowed in https://github.com/giakki/uncss, since I found this in documents:
''''
urls (Array): array of URLs to load with Phantom (on top of the files already passed if any). NOTE: this feature is deprecated, you can pass URLs directly as arguments.
''''

Hi,

I get this error when launching the task.

TypeError: First argument needs to be a number, array or string.
    at new Buffer (buffer.js:188:15)
    at /var/www/lms3/node_modules/gulp-uncss/index.js:51:33
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/lib/uncss.js:222:24
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/node_modules/async/lib/async.js:485:30
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/lib/uncss.js:33:20
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/node_modules/async/lib/async.js:232:13
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/node_modules/async/lib/async.js:113:21
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/node_modules/async/lib/async.js:24:16
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/node_modules/async/lib/async.js:229:17
    at /var/www/lms3/node_modules/gulp-uncss/node_modules/uncss/lib/phantom.js:95:20

gulp.task('uncss', function(){
    return gulp
        .src('public/css/optimized.min.css')
        .pipe( uncss({
            html: ['public/index.html', 'client/views/partials/**/*']
        }) )
    ;
});

Makes the API simpler and allows users to choose which CSS minifier they would like to use in their build. See this issue for a more detailed discussion.

Un css parse search classes in static html.

And what about if i add some elements by JS dynamically? You know what i mean?

I'm trying to use gulp-uncss with Zurb Foundation. Foundation has some JS to make dynamic elements the same height. It calculates the max-height of the matching elements, then injects an inline style to set the height of the elements. It does this when the page loads.

When I add gulp-uncss to my gulpfile.js the injected styles are no longer injected. Do you know why gulp-uncss would prevent this from happening?

I need to access the login controlled area of my website. Using phantomjs i can do this but how to do it in uncss ?

I need more info regarding the process and what is removed. I don't seem to be able to get the report from uncss using this plugin.

Any ideas?

I was wondering if there is a way to inject some javascript before running the uncss task. I'm uncss'ing a ReactJS app, and it needs the es5-shim.js file.

I'd rather not include it in my site, but rather just for phantomjs.

Is there a way we can inject arbitrary javascript using gulp-uncss?

I tested it directly using a sample javascript file and the onResourceReceived() method, and it works flawlessly:

var page = require('webpage').create();

page.onResourceReceived = function() {
    page.injectJs('js/es5-shim.min.js')
};

page.open('http://localhost:63342/expatel-frontend/index.html#/', function() {
    page.render('shot-1.png');
    phantom.exit();
});

I think it would be great to add this as an option, like so:

gulp.task('uncss', function() {
    return gulp.src(['file1.css','file2.css'])
        .pipe(uncss({
            html: [
                'http://localhost/index.html#/',
                'http://localhost/index.html#/other-path'
            ],
            inject: ['js/es5-shim.min.js']
        }))
        .pipe(gulp.dest('./out'));
});

Ben, i have no idea if i need to change proxy. that's my code

.pipe(uncss({
                    html: ['http://www.google.com/'],
                }))

but my default proxy can not access google.

so i want add proxy seeting , but gulp-uncss does not provide options.

I add proxy info in file gulp-uncss\node_modules\uncss\src\phantom.js line 26, then works fine.

would you please advise ?

function init(instance) {
    if (instance) {
        phantom = instance;
        return null;
    }
    return new promise(function (resolve) {
        resolve(phridge.spawn({
            //add proxy 
            //proxy:"http://XXXXX:XXX",
            ignoreSslErrors: 'yes',
            sslProtocol: 'any'
        }));
    }).then(function (ph) {
        phantom = ph;
    }).disposer(phridge.disposeAll);
}

Hi,

Great work on an awesome plugin! I used to use Chrome DevTools for this task but it's not very friendly when you need to output a clean CSS file. This works nicely. Kudos!

I was wondering if there was a way to leverage PhantomJS settings (e.g. userAgent) and viewportSize?

Thanks.

Hi there,

I don't know why, but using uncss just disables the dropdown menu of my navbar navigation. I explained the circumstances on stackoverflow (https://stackoverflow.com/questions/28082782/gulp-uncss-breaks-bootstrap-dropdown-navbar-navigation).

I understant that you aren't actually involved in the uncss part and that you just implemented exisitng technology for gulp, but I would like to know if you have any suggestion for this behaviour.

lovely regards,

your George

Bump up UnCSS package version!

Having some problem in installing dependencies by npm install here

[samar@sp gulp-uncss [±] master 6a1f22c ✓]$ npm install
/
> [email protected] install /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/phantomjs
> node install.js

Writing location.js file
PhantomJS is already installed at /usr/local/bin/phantomjs.
npm ERR! Darwin 14.0.0
npm ERR! argv "node" "/Users/samar/github/nvm/v0.10.22/bin/npm" "install"
npm ERR! node v0.10.22
npm ERR! npm  v2.1.10
npm ERR! path /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/commander/package.json
npm ERR! code ENOENT
npm ERR! errno 34

npm ERR! enoent ENOENT, open '/Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/commander/package.json'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/samar/github/gulp-uncss/npm-debug.log

npm-debug.log with version 0.8.1

26314 info postinstall [email protected]
26315 verbose unlock done using /Users/samar/.npm/_locks/phantomjs-edb554be09331607.lock for /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/phantomjs
26316 verbose about to build /Users/samar/github/gulp-uncss/node_modules/uncss
26317 verbose unlock done using /Users/samar/.npm/_locks/uncss-1df5aa28cc56f68e.lock for /Users/samar/github/gulp-uncss/node_modules/uncss
26318 verbose stack Error: ENOENT, open '/Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/commander/package.json'
26319 verbose cwd /Users/samar/github/gulp-uncss
26320 error Darwin 14.0.0
26321 error argv "node" "/Users/samar/github/nvm/v0.10.22/bin/npm" "install"
26322 error node v0.10.22
26323 error npm  v2.1.10
26324 error path /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/commander/package.json
26325 error code ENOENT
26326 error errno 34
26327 error enoent ENOENT, open '/Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/commander/package.json'
26327 error enoent This is most likely not a problem with npm itself
26327 error enoent and is related to npm not being able to find a file.
26328 verbose exit [ 34, true ]
26329 verbose unbuild node_modules/uncss/node_modules/commander
26330 verbose gentlyRm vacuuming /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/commander
26331 silly gentlyRm purging /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/commander
26332 silly gentlyRm quitting because other entries in /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules
26333 verbose unbuild node_modules/uncss
26334 info preuninstall [email protected]
26335 info uninstall [email protected]
26336 verbose unbuild rmStuff [email protected] from /Users/samar/github/gulp-uncss/node_modules
26337 verbose gentlyRm verifying that /Users/samar/github/gulp-uncss is managed by npm
26338 silly cacheAndTest /Users/samar/github/gulp-uncss is not inside /Users/samar/github/gulp-uncss/node_modules
26339 silly isManaged /Users/samar/github/gulp-uncss is not inside /Users/samar/github/gulp-uncss/node_modules
26340 silly cacheAndTest /Users/samar/github/gulp-uncss is not inside /Users/samar/github/gulp-uncss/node_modules/.bin
26341 silly cacheAndTest /Users/samar/github/gulp-uncss is inside /Users/samar/github/gulp-uncss
26342 silly gentlyRm /Users/samar/github/gulp-uncss is managed by npm
26343 silly gentlyRm /Users/samar/github/gulp-uncss/node_modules/.bin/uncss is under /Users/samar/github/gulp-uncss
26344 verbose gentlyRm vacuuming /Users/samar/github/gulp-uncss/node_modules/.bin/uncss up to /Users/samar/github/gulp-uncss
26345 info postuninstall [email protected]
26346 verbose gentlyRm vacuuming /Users/samar/github/gulp-uncss/node_modules/uncss
26347 silly gentlyRm purging /Users/samar/github/gulp-uncss/node_modules/uncss
26348 silly gentlyRm quitting because other entries in /Users/samar/github/gulp-uncss/node_modules

Fix

Updating uncss version to 0.9.1 fixes this problem for me.

[samar@sp gulp-uncss [±] master 6a1f22c ✓]$ git diff package.json
diff --git a/package.json b/package.json
index d40cd1e..6e4143d 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   "dependencies": {
     "gulp-util": "~3.0.1",
     "object-assign": "^1.0.0",
-    "uncss": "0.8.1"
+    "uncss": "0.9.1"
   },
   "devDependencies": {
     "chai": "~1.9.1",

[samar@sp gulp-uncss [±] master 6a1f22c ✗]$ npm install
|
> [email protected] install /Users/samar/github/gulp-uncss/node_modules/uncss/node_modules/phantomjs
> node install.js

Writing location.js file
PhantomJS is already installed at /usr/local/bin/phantomjs.
[email protected] node_modules/uncss
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/bluebird/js/main/async.js:43
fn = function () { throw arg; };
^
Error: Cannot load http://sx-ecommerce-sx-adl.local.thisisblaze.com/blog/039-wash-off-039-fake-tan: Phantomjs returned status fail
at reject (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/phridge/lib/phantom/start.js:71)
at onPageLoaded (:4)
at :/modules/webpage.js:281
-----------------------------------------------------------------------
at Phantom._send (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/phridge/lib/Phantom.js:165:20)
at Page.run (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/phridge/lib/Page.js:62:25)
at Phantom.openPage (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/phridge/lib/Phantom.js:123:17)
at Object.fromRemote (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/uncss/src/phantom.js:148:20)
at /usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:41:28
at tryCatcher (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/bluebird/js/main/util.js:26:23)
at MappingPromiseArray._promiseFulfilled (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/bluebird/js/main/map.js:56:38)
at MappingPromiseArray.init (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/bluebird/js/main/promise_array.js:92:18)
at MappingPromiseArray.init (/usr/home/apache/hosts/WSBprojects/SX-Ecommerce/node_modules/gulp-uncss/node_modules/bluebird/js/main/map.js:29:23)

Hi,

I think this issue is perhaps upstream either in PhantomJS or uncss itself not really sure, I'm passing in an array of urls from a sitemap and these links are failing, but if I instead pass in just the failed url on its own as an individual url it works just fine.. Any suggestions?

Hi there,
I'm mashing at the keyb trying to get generator-gulp-angular's cssFilter to use uncss. I've tried adding .pipe(uncss({html:'src/app/**/*.html'})) in between .pipe(cssFilter) and .pipe(cssFilter.restore

When I build, I get a page without any styles at all. in /dist/styles vendor.css is empty (232b) and app.css is only 111 lines unminified. (2kb)

when I comment out the uncss pipe, app.css is 164kb and vendor.css is 63kb

Not really sure what's going on here: if this is an issue with gulp-uncss, the generator, or it's PEBCAK.

I'm a bit confused about the description of the README related with the kind of values that html plugin property takes.

Example section mentions that the plugin accepts globs, however in the options section it doens't mention it.

If I'm not wrong, the implementation doesn't make any processing of the property and it passes the value directly to uncss and the documentation of uncss doesn't metion that globs may be use, although it includes glob as a dependency so it may be used for it, but I'm not user because I haven't inspected the uncss source code.

I found all of this when I couldn't get the result that I expected, setting as an html option value an array of two globs, for example:

html: [ 'dist/**/*.html', '!dist/{amp,amp/**/*}']

Nonetheless it worked when I set it as string

html: 'dist/**/*.html,!dist/{amp,amp/**/*}'

I think that uncss accepts globs however it doesn't combine them properly when they are set through different array elements.

This issues isn't about what uncss does or not, I'm going to open an issue there referencing this; this one is about the confusion that I had when I've read the README as I mentioned at the beginning.

Hi there! Thanks for the awesome Gulp plugin.

After reading this grunt-slanted article about using UnCSS and getting the basic gulp-uncss features working in my styles task, I was wondering if there is an option to output the file size or selector savings from running UnCSS in a gulp notification or terminal message.

Is this something that exists either in UnCSS or gulp-uncss? If so, would you mind helping with some example syntax?

I'm just transitioning to use Gulp as part of my workflow, so this question may be just my ignorance showing. Thanks in advance for the help (and again for the sweet plugin).

Like this

   .pipe(uncss({
            html: ['index.html'],['contact.html'],
        }))

Is there support for PHP? I'm getting this error:

gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
fn = function () { throw arg; };

Thanks!

I use Symphony CMS an open-source XSLT framework. All of the templates are .xsl files which are valid XML. XSLT supports HTML tags out of the box. I have tried passing .xsl files into gulp-uncss but it gives the following error:

Error: ENOENT, open 'workspace/xsl/master.xsl'

Any ideas on how I can use UnCSS in my projects with XSLT?

I get an error saying:

TypeError in plugin 'gulp-uncss'
Message:
    Bad argument

With a fairly typical setup:

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')({
    pattern: ['gulp-*'],
    lazy: true
});
    gulp.src(['app/css/app.scss'])
    .pipe(plugins.plumber())
    .pipe(plugins.sass({
        includePaths: [
        './app/vendor',
        './bower_components/bootstrap/scss',
        './bower_components/open-sans-fontface',
        './app/vendor/compass-sass-mixins/lib',
        './app/vendor/compass-sass-mixins/lib/css3',
        './node_modules/include-media/dist',
        './node_modules/modularscale-sass/stylesheets'
        ],
    }))
    .pipe(plugins.postcss([autoprefixer]))
    .pipe(plugins.concat('app.css'))
    .pipe(gulp.dest('public/css'))
    .pipe(plugins.uncss({
        html: ['public/**/*.html']
    }))
    .pipe(gulp.dest('public/css'))
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.cssnano())
    .pipe(gulp.dest('public/css'))

However, running through the UnCSS CLI it progresses as expected. This is with [email protected] and [email protected]. The html-option seems correct enough, what could be causing the error?

How can you use the gulp-uncss task to remove minified css from the gulp-sass task. This is how my code looks, if you can help me with this i'd be really grateful cause I can't get it to work since yesterday.

gulp.task('sass', function() {
    return gulp.src('public/assets/src/sass/bootup.scss')
        .pipe(sass(config))
        .on('error', notify.onError({
            title: 'SASS Failed',
            message: 'Error(s) occurred during compile!'
        }))
        .pipe(rename('app.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('public/assets/build/css'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(notify({ 
            title: 'SASS Successed',
            message: 'All files was compile succesful!'
        }));      
});

gulp.task('uncss', function() {
    gulp.src('public/assets/build/css/app.min.css')
        .pipe(uncss({
            html: glob.sync('public/**/*.html')
        }))
        .pipe(gulp.dest('public/assets/build/css/test'));
});

hi,
I have 62 templates in folders and subfolders
How can I specify to uncss to read all the html in a specific folder ?

this work:

gulp.task('uncss', function() {
    gulp.src('static/css/vendor/bootstrap.min.css')
        .pipe(uncss({
            html: ['templates/404.html','templates/contact/contact.html','templates/base.html' ]
        }))
        .pipe(gulp.dest('static/css'));
});

with a regex it doesn't:

gulp.task('uncss', function() {
    gulp.src('static/css/vendor/bootstrap.min.css')
        .pipe(uncss({
            html: ['templates/*.html', 'templates/*/*.html']
        }))
        .pipe(gulp.dest('static/css'));
});

Any idea ?

I am trying to ingore user interaction based classes but uncss not ignoring these classes

gulp.task('uncss-task', function () {
    return gulp.src(headCss)
      .pipe(expect({ errorOnFailure: true,verbose:true }, headCss))
      .pipe(uncss({
          html: allLinks,
          ignore : [
            '.active',
            '.op-dark',
            '.dialog-overlay',
            ],
      }))
      .pipe(minifyCSS())
      .pipe(gulp.dest('static/gulp-build/styles'))
});

tried regex pattern also but it seems not working

      ignore : [
            '/\.active/',
            '/\.op\-dark/',
            '/\.dialog\-overlay/',
            ],

I am running uncss on a .cshtml file. It works ( it appears to anyway) but it is throwing errors in the output panel during the gulp process.

I removed repetitive unnecessary path items from the code below to save space and make it easier to read.

The error is as follows:

..\node_modules\gulp-uncss\node_modules\uncss\node_modules\bluebird\js\main\async.js:43
fn = function () { throw arg; };
^
Error: PhantomJS: Cannot open about:blank
at reject (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\lib\phantom\start.js:71)
at :4
at :/modules/webpage.js:281
-----------------------------------------------------------------------
at Phantom._send (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\lib\Phantom.js:165:20)
at Page.run (..\node_modules\uncss\node_modules\phridge\lib\Page.js:62:25)
at ..\node_modules\gulp-uncss\node_modules\uncss\src\phantom.js:125:21
at tryCatchReject (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\node_modules\when\lib\makePromise.js:845:30)
at runContinuation1 (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\node_modules\when\lib\makePromise.js:804:4)
at Fulfilled.when (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\node_modules\when\lib\makePromise.js:592:4)
at Pending.run (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\node_modules\when\lib\makePromise.js:483:13)
at Scheduler._drain (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\node_modules\when\lib\Scheduler.js:62:19)
at Scheduler.drain (..\node_modules\gulp-uncss\node_modules\uncss\node_modules\phridge\node_modules\when\lib\Scheduler.js:27:9)
at process._tickCallback (node.js:419:13)
Process terminated with code 8.

I understand that the ignore rule is there, but there are so many aspects of bootstrap that I can't seem to ignore the right css seclectors.
Example of interactivity working without uncss (I only click twice):

Example of interactivity not working whilst using uncss (I only click twice):

My ignore array so far:
ignore: [':hover', ':click', ':focus', '.collapse', '.navbar-collapse', '.navbar-toggle', '.collapsed', '.dropdown', '.dropdown-toggle']

I submitted this to UnCSS tracker.

It would be awesome to return a file with the stripped out code or output it somehow somewhere. That would be way easier to see what got hacked out and comb through that to add to the ignore! Is this currently possible?

Example:
File: unused.css
.not{color:#000}.another{display:block} etc...

If i create a element and append to body, then use uncss to scan css file and html file.But the class named 'ccc' also will be cleared. Does uncss can support this situation?
Example code :
var $aa = $("

I'm unable to run multiple tasks at the same time with gulp-uncss-0.4.5. Only the first task finishes successfully.

Traceback:

(node) warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit.
Trace
    at process.addListener (events.js:160:15)
    at process.on.process.addListener (node.js:773:26)
    at /Users/mietek/…/node_modules/gulp-uncss/node_modules/uncss/node_modules/node-phantom-simple/node-phantom-simple.js:87:21
    at Array.forEach (native)
    at spawnPhantom (/Users/mietek/…/node_modules/gulp-uncss/node_modules/uncss/node_modules/node-phantom-simple/node-phantom-simple.js:86:31)
    at Object.exports.create (/Users/mietek/…/node_modules/gulp-uncss/node_modules/uncss/node_modules/node-phantom-simple/node-phantom-simple.js:201:5)
    at /Users/mietek/…/node_modules/gulp-uncss/node_modules/uncss/lib/phantom.js:37:21
    at Object.async.whilst (/Users/mietek/…/node_modules/gulp-uncss/node_modules/uncss/node_modules/async/lib/async.js:663:13)
    at /Users/mietek/…/node_modules/gulp-uncss/node_modules/uncss/node_modules/async/lib/async.js:667:23
    at phantom.create.phantomPath (/Users/mietek/…/node_modules/gulp-uncss/node_modules/uncss/lib/phantom.js:46:24)
(repeats two more times)

Request() error evaluating createPage() call: Error: connect ECONNREFUSED
(repeats four more times)

What could cause the ECONNREFUSED?

(See also uncss/uncss#54 (comment) and baudehlo/node-phantom-simple#2 (comment))

I'm having an issue getting gulp-uncss playing nicely with postcss. I was originally using gulp-sass which worked fine.

But using postcss I get this error:

/Applications/MAMP/htdocs/wpn-chameleon/addition/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
        fn = function () { throw arg; };
                                 ^
Error: UnCSS: no stylesheets found
    at process (/Applications/MAMP/htdocs/wpn-chameleon/addition/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:145:15)

My gulp css task looks like this:

module.exports = function(gulp, plugins, config) {
  return function() {
    return gulp.src(config.development.css.src + '{style,style.ie}.css')
      .pipe(plugins.postcss(processors))
      .pipe(plugins.uncss({
        html: ['./build/development/*.html'],
        ignore: [/(ie7|ie8)/, /\.active/g]
      }))
      .pipe(gulp.dest(config.development.css.dest))
  }
}

Anything obvious as to why it's not working?

Hi! I just install gulp-uncss and when I added to my task, I get the following error

[21:00:21] Starting 'styles'...
execvp(): Permission denied
[21:00:27] { name: 'Error',
  message: 'execvp(): Permission denied\n',
  stack: 'Error: execvp(): Permission denied\n\n    at Socket.onStderr (/var/www/public/node_modules/gulp-uncss/node_modules/uncss/node_modules/phridge/lib/spawn.js:79:28)\n    at Socket.EventEmitter.emit (events.js:117:20)\n    at Socket.<anonymous> (_stream_readable.js:746:14)\n    at Socket.EventEmitter.emit (events.js:92:17)\n    at emitReadable_ (_stream_readable.js:408:10)\n    at emitReadable (_stream_readable.js:404:5)\n    at readableAddChunk (_stream_readable.js:165:9)\n    at Socket.Readable.push (_stream_readable.js:127:10)\n    at Pipe.onread (net.js:526:21)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uncss' }

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: spawn EACCES
    at errnoException (child_process.js:988:11)
    at Process.ChildProcess._handle.onexit (child_process.js:779:34)

The folder structure is quite simple:

gulpfile
app
|
--> index.html
--> styles
|
-->styles.css

And this is the task:

gulp.task('styles', function () {
    return gulp.src('app/sass/**/*.scss')
        .pipe($.sass({
            errLogToConsole: true,
            includePaths: ['styles'].concat(neat)
        }).on('error', errorHandler))
        .pipe($.autoprefixer('last 1 version'))
        .pipe($.concat('styles.css'))
        .pipe($.uncss({
            html: 'app/index.html'
        }).on('error', $.util.log))
        .pipe(gulp.dest('app/styles'))
        .pipe(reload({stream:true}));
});

Thanks!