Comments (53)
@micahblu tried this configuration on a osx and everything works just as expected. Can you provide some more infos on the thrown err?
You can add a callback function to see whats causing the error like this:
critical.generateInline({
base: 'dist/',
src: 'about.html',
cssPath: 'stylesheets/',
styleTarget: 'stylesheets/critical.css',
htmlTarget: 'about.html',
width: 320,
height: 480,
minify: true,
maxInlineImageSize: 10240
},function(err){ if (err) {console.log(err);}});
from critical.
Could you try again using the master
branch after tracing the issue?
from critical.
Will do this weekend. Thanks for the quick response
from critical.
I was having the same issue.
My issue was that the included phantomjs (node_modules/penthouse/node-modules/phanom/bin...) binary was not able to run, in my case it was due to dependencies of phantomjs not being resolved.
One quick thing to try, do you have phantomjs installed on the target system, while not needed, the dependancies are, see here: ariya/phantomjs#10904
'libfontconfig' was the culprit for me,
apt-get install libfontconfig
did the trick.
from critical.
Hmm sorry guys, seems like there are still some issue. While the above was an issue for me because phantomjs was not running, it is crashing now.
The toString errors occur if no output was generated by phantom... So if phanotmjs is not able to run or it crashes it produces the same errors. I am running Ubuntu server 12. on 14 it works.
I was able to get more output by calling critical with the callback function after the options:
critical({
//options
},function(err,out){
if(err)console.log(err);
});
from critical.
@johanbuys did you install from npm or did you use the master branch from Github?
What's the output?
from critical.
@bezoerb I first tested against my own code, then followed the gulp app tutorial, both times using npm to install.
Ubuntu 12.04 Server LTS, the issues happen, on server 14.04 it seems to work as expected.
from critical.
Output was
Phantom js exit code null
and then the same toString errors on line 138. (as mentioned above that is to be expected as there is no test for the criticalcss object being non null and thus the subsequent calls to criticalcss.toString will fail.
When I added the callback to print the error object I get the standard PhantomJs Crash output with dump file.
from critical.
@johanbuys could you try installing directly from master and see if you're able to get it working as expected? We may well need to update the gulp app tutorial.
from critical.
@addyosmani
Hi I just tried it, cloned the gulp tutorial and the master branch of critical and it worked. Then just for good measure installed the master branch into my old sample that was crashing and it's also working now.
I must also just add, this maybe a coincidence but just for completeness sake, I also fixed up some permission issues I was having with npm (npm install as root) (I saw that Critical was installed in ~/.npm as root.) Cause vs Causality?
from critical.
#43 fixed that bug already, try to install from master
npm install http://github.com/addyosmani/critical/tarball/master
from critical.
I still have the issue after installing from master. I hope I'm not missing something obvious.
D:\websites\wskm\web-starter-kit-master>npm install http://github.com/addyosmani/critical/tarball/master
\
[email protected] install D:\websites\wskm\web-starter-kit-master\node_modules\critical\node_modules\penthouse\node_modules\phantomjs
node install.js
Download already available at C:\Users\TCH-DE1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extract-1415026515942\phantomjs-1.9.8-windows -> D:\websites\wskm\web-starter-kit-master\node_modules\critical\node_modules\penthouse\node_modules\phantomjs\lib\phantom
Extracting zip contents
Removing D:\websites\wskm\web-starter-kit-master\node_modules\critical\node_modules\penthouse\node_modules\phantomjs\lib\phantom
Copying extracted folder C:\Users\TCH-DE
Removing C:\Users\TCH-DE~1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extract-1415026515942
Writing location.js file
Done. Phantomjs binary available at D:\websites\wskm\web-starter-kit-master\node_modules\critical\node_modules\penthouse\node_modules\phantomjs\lib\phantom\phantomjs.exe
[email protected] node_modules\critical
├── [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])
D:\websites\wskm\web-starter-kit-master>gulp
[15:55:41] Using gulpfile D:\websites\wskm\web-starter-kit-master\gulpfile.js
[15:55:41] Starting 'clean'...
D:\websites\wskm\web-starter-kit-master\node_modules\critical\node_modules\bluebird\js\main\async.js:95
throw res.e;
^
TypeError: Cannot call method 'toString' of undefined
at D:\websites\wskm\web-starter-kit-master\node_modules\critical\index.js:150:30
at tryCatch1 (D:\websites\wskm\web-starter-kit-master\node_modules\critical\node_modules\bluebird\js\main\util.js:45:21)
at Promise$_callHandler as _callHandler
at Promise$_settlePromiseFromHandler as _settlePromiseFromHandler
at Promise$_settlePromiseAt as _settlePromiseAt
at Promise$_settlePromises as _settlePromises
at Async$_consumeFunctionBuffer as _consumeFunctionBuffer
at Async$consumeFunctionBuffer (D:\websites\wskm\web-starter-kit-master\node_modules\critical\node_modules\bluebird\js\main\async.js:40:14)
at process._tickCallback (node.js:419:13)
from critical.
Same problem. If I use the callback syntax, no error gets passed, but the output is empty. If I use the built in options I get this:
/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/async.js:95
throw res.e;
^
TypeError: Cannot call method 'toString' of undefined
at /Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/index.js:150:30
at tryCatch1 (/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/util.js:45:21)
at Promise$_callHandler [as _callHandler] (/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/promise.js:660:13)
at Promise$_settlePromiseFromHandler [as _settlePromiseFromHandler] (/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/promise.js:675:18)
at Promise$_settlePromiseAt [as _settlePromiseAt] (/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/promise.js:845:14)
at Promise$_settlePromises [as _settlePromises] (/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/promise.js:988:14)
at Async$_consumeFunctionBuffer [as _consumeFunctionBuffer] (/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/async.js:77:12)
at Async$consumeFunctionBuffer (/Users/dj/Projects/djmadeira.com/wp-content/themes/djmadeira-wptheme/node_modules/critical/node_modules/bluebird/js/main/async.js:40:14)
at process._tickCallback (node.js:419:13)
from critical.
@djmadeira @tchaecker can you try installing the cli
branch
npm install git://github.com/addyosmani/critical.git#cli
there's another change in there which addresses this problem.
from critical.
I have https://www.npmjs.org/package/gulp-git installed but I get errors with that command.
D:\websites\wskm\aip>npm install git://github.com/addyosmani/critical.git#cli
npm WARN git config --get remote.origin.url
returned wrong result (git://githu
b.com/addyosmani/critical.git) undefined
npm WARN git config --get remote.origin.url
returned wrong result (git://githu
b.com/addyosmani/critical.git) undefined
npm ERR! git clone git://github.com/addyosmani/critical.git undefined
npm ERR! git clone git://github.com/addyosmani/critical.git undefined
npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "D:\Program Files\nodejs\node.exe" "D:\Program Files\nod
ejs\node_modules\npm\bin\npm-cli.js" "install" "git://github.com/addyosmani/
critical.git#cli"
npm ERR! cwd D:\websites\wskm\aip
npm ERR! node -v v0.10.32
npm ERR! npm -v 1.4.28
npm ERR! code ENOGIT
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! D:\websites\wskm\aip\npm-debug.log
npm ERR! not ok code 0
from critical.
This looks lika an weird issue with npm. Which npm version are you using?
I got the same error on installation with 1.3.11
on windows.
After upgrading with the official installer from http://nodejs.org/ to version 1.4.28
everything works as expected.
from critical.
I have 1.4.28. Somehow my npm isn't updating.
D:\websites\wskm\aip>npm install -g [email protected]
C:\Users\tch-desktop\AppData\Roaming\npm\npm -> C:\Users\tch-desktop\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
[email protected] C:\Users\tch-desktop\AppData\Roaming\npm\node_modules\npm
D:\websites\wskm\aip>npm -v
1.4.28
from critical.
@addyosmani any ideas?
from critical.
Ok, seems like some cache issue after renaming a file. I've duplicated the branch and this seems to work. Try npm install git://github.com/addyosmani/critical.git#cli-test
from critical.
D:\websites\wskm\aip>npm install git://github.com/addyosmani/critical.git#cli-test
npm WARN git config --get remote.origin.url
returned wrong result (git://github.com/addyosmani/critical.git) undefined
npm WARN git config --get remote.origin.url
returned wrong result (git://github.com/addyosmani/critical.git) undefined
npm ERR! git clone git://github.com/addyosmani/critical.git undefined
npm ERR! git clone git://github.com/addyosmani/critical.git undefined
npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "git://github.com/addyosmani/critical.git#cli-test"
npm ERR! cwd D:\websites\wskm\aip
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code ENOGIT
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! D:\websites\wskm\aip\npm-debug.log
npm ERR! not ok code 0
from critical.
npm ERR! Please check if you have git installed and in your PATH.
@tchaecker try git --version
from critical.
@tchaecker damn, we were talking about different issues. i should have read the complete error message ;) thanks @alfredbez
from critical.
Sorry for your time. My bad, I'm still learning to use Gulp. I have git installed but the git command does not work in that directory. Will figure that out. :(
from critical.
You've to add git to your PATH.
- check where your git install is (something like
"C:\Program Files (x86)\Git"
) - then add the
bin
directory to your PATH with the following command:set PATH=%PATH%;C:\your\path\to\git\bin
(e.g.set PATH=%PATH%;C:\Program Files (x86)\Git\bin
)
You can add git to your PATH during install process
from critical.
Thank you. I managed to get Git running and install the package.
from critical.
@tchaecker does the cli branch fix the toString error for you?
from critical.
@bezoerb Maybe, but it doesn't work, yet. I'm not sure if I overlooked something again.
D:\websites\wskm\aip>npm install git://github.com/addyosmani/critical.git#cli-test
|
[email protected] install D:\websites\wskm\aip\node_modules\critical\node_modules\penthou
se\node_modules\phantomjs
node install.js
Download already available at C:\Users\TCH-DE1\AppData\Local\Temp\phantomjs\phantomjs-1.91\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-wi
.8-windows.zip
Extracting zip contents
Removing D:\websites\wskm\aip\node_modules\critical\node_modules\penthouse\node_modules\ph
antomjs\lib\phantom
Copying extracted folder C:\Users\TCH-DE
ndows.zip-extract-1415798612676\phantomjs-1.9.8-windows -> D:\websites\wskm\aip\node_modul
es\critical\node_modules\penthouse\node_modules\phantomjs\lib\phantom
Removing C:\Users\TCH-DE~1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extrac
t-1415798612676
Writing location.js file
Done. Phantomjs binary available at D:\websites\wskm\aip\node_modules\critical\node_module
s\penthouse\node_modules\phantomjs\lib\phantom\phantomjs.exe
[email protected] node_modules\critical
├── [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]
.1)
├── [email protected] ([email protected], [email protected], [email protected], [email protected], opti
[email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected])
D:\websites\wskm\aip>gulp
Error: Cannot find module 'critical'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (D:\websites\wskm\aip\gulpfile.js:33:16)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
from critical.
try installing with --save-dev
option.
npm install --save-dev git://github.com/addyosmani/critical.git#cli-test
from critical.
I probably missed something really obvious, but this is the result:
D:\websites\wskm\aip>npm install --save-dev git://github.com/addyosmani/critical.git#cli-test
[email protected] install D:\websites\wskm\aip\node_modules\critical\node_modules\penthouse\node_modules\phantomjs
node install.js
Download already available at C:\Users\TCH-DE1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extract-1415799636654\phantomjs-1.9.8-windows -> D:\websites\wskm\aip\node_modules\critical\node_modules\penthouse\node_modules\phantomjs\lib\phantom
Extracting zip contents
Removing D:\websites\wskm\aip\node_modules\critical\node_modules\penthouse\node_modules\phantomjs\lib\phantom
Copying extracted folder C:\Users\TCH-DE
Removing C:\Users\TCH-DE~1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-extract-1415799636654
Writing location.js file
Done. Phantomjs binary available at D:\websites\wskm\aip\node_modules\critical\node_modules\penthouse\node_modules\phantomjs\lib\phantom\phantomjs.exe
[email protected] node_modules\critical
├── [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])
D:\websites\wskm\aip>gulp
Error: Cannot find module 'critical'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (D:\websites\wskm\aip\gulpfile.js:33:16)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
Additional information: My gulpfile.js (paths are not set for critical, yet)
/**
*
- Web Starter Kit
- Copyright 2014 Google Inc. All rights reserved.
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License
*/
'use strict';
// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var reload = browserSync.reload;
var gulp = require('gulp'),
critical = require('critical'),
fs = require('fs');
// Generate & Inline Critical-path CSS
gulp.task('critical', function () {
critical.generateInline({
base: 'dist/',
src: 'index.html',
cssPath: 'stylesheets/',
styleTarget: 'stylesheets/critical.css',
htmlTarget: 'index.html',
width: 320,
height: 480,
minify: true,
maxInlineImageSize: 10240
});
critical.generateInline({
base: 'dist/',
src: 'about.html',
cssPath: 'stylesheets/',
styleTarget: 'stylesheets/critical.css',
htmlTarget: 'about.html',
width: 320,
height: 480,
minify: true,
maxInlineImageSize: 10240
});
});
var AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
];
// Lint JavaScript
gulp.task('jshint', function () {
return gulp.src('app/scripts/*/.js')
.pipe(reload({stream: true, once: true}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe(
});
// Optimize Images
gulp.task('images', function () {
return gulp.src('app/images/*/')
.pipe(
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size({title: 'images'}));
});
// Copy All Files At The Root Level (app)
gulp.task('copy', function () {
return gulp.src([
'app/',
'!app/.html',
'node_modules/apache-server-configs/dist/.htaccess'
], {
dot: true
}).pipe(gulp.dest('dist'))
.pipe($.size({title: 'copy'}));
});
// Copy Web Fonts To Dist
gulp.task('fonts', function () {
return gulp.src(['app/fonts/**'])
.pipe(gulp.dest('dist/fonts'))
.pipe($.size({title: 'fonts'}));
});
// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function () {
// For best performance, don't add Sass partials to gulp.src
return gulp.src([
'app/styles/.scss',
'app/styles/__/.css',
'app/styles/components/components.scss'
])
.pipe($.changed('styles', {extension: '.scss'}))
.pipe($.rubySass({
style: 'expanded',
precision: 10
}))
.on('error', console.error.bind(console))
.pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
.pipe(gulp.dest('.tmp/styles'))
// Concatenate And Minify Styles
.pipe(
.pipe(gulp.dest('dist/styles'))
.pipe($.size({title: 'styles'}));
});
// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
return gulp.src('app/*/.html')
.pipe(assets)
// Concatenate And Minify JavaScript
.pipe($.if('.js', $.uglify({preserveComments: 'some'})))
// Remove Any Unused CSS
// Note: If not using the Style Guide, you can delete it from
// the next line to only include styles your project uses.
.pipe($.if('.css', $.uncss({
html: [
'app/index.html',
'app/styleguide.html'
],
// CSS Selectors for UnCSS to ignore
ignore: [
/.navdrawer-container.open/,
/.app-bar.open/
]
})))
// Concatenate And Minify Styles
// In case you are still using useref build blocks
.pipe($.if('.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
// Update Production Style Guide Paths
.pipe($.replace('components/components.css', 'components/main.min.css'))
// Minify Any HTML
.pipe($.if('.html', $.minifyHtml()))
// Output Files
.pipe(gulp.dest('dist'))
.pipe($.size({title: 'html'}));
});
// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
// Watch Files For Changes & Reload
gulp.task('serve', ['styles'], function () {
browserSync({
notify: false,
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: ['.tmp', 'app']
});
gulp.watch(['app//*.html'], reload);
gulp.watch(['app/styles//.{scss,css}'], ['styles', reload]);
gulp.watch(['app/scripts/__/.js'], ['jshint']);
gulp.watch(['app/images/*/'], reload);
});
// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function () {
browserSync({
notify: false,
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: 'dist'
});
});
// Build Production Files, the Default Task
gulp.task('default', ['clean'], function (cb) {
runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy'], cb);
});
// Run PageSpeed Insights
// Update url
below to the public URL for your site
gulp.task('pagespeed', pagespeed.bind(null, {
// By default, we use the PageSpeed Insights
// free (no API key) tier. You can use a Google
// Developer API key if you have one. See
// http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
url: 'https://example.com',
strategy: 'mobile'
}));
// Load custom tasks from the tasks
directory
try { require('require-dir')('tasks'); } catch (err) {}
from critical.
maybe you could post a link to a gist which holds your gulpfile
from critical.
https://gist.github.com/tchaecker/817fa4dcc40b5ecb3eb9
from critical.
@tchaecker Does the critical
-directory exist in D:\websites\wskm\aip\node_modules
?
from critical.
Yes. http://prntscr.com/55miqe
from critical.
@tchaecker sorry, this was my fault. i forgot adding the main file in package.json
after restructuring the project files.
I just updated the branch. Could you please try again?
from critical.
No errors anymore. Awesome. I need to update the paths to check the results but will only be able to do so by tomorrow morning. Thank you so much!
from critical.
Thank you for fixing this issue it was a real pain in the b*t, however I'm still having issues printing my inline css. This is how my gulp task looks gulp.task('critical', function () {
critical.generateInline({
base: 'public/',
src: 'public/layouts/index.html',
styleTarget: 'public/assets/build/css/app.min.css',
htmlTarget: 'public/layouts/index.html',
minify: true
});
});
from critical.
remove public/
from src
,styleTarget
& htmlTarget
Does it work without the width
& height
options?
I'd suggest the following code:
gulp.task('critical', function() {
critical.generateInline({
base: 'public/',
src: 'layouts/index.html',
styleTarget: 'assets/build/css/app.min.css',
htmlTarget: 'layouts/index.html',
width: 320,
height: 480,
minify: true
});
});
from critical.
Well I didn't really get the width and heigh, is that like it only work in those criteria. Cause I want the critical path to work on all resolutions, not just one particular
from critical.
no, width and height defaults to 320/480 but these values should be set based on your page/layout
from critical.
I've tried 2560/1440 but nothing happens :(. Also if I want this critical path to work on multiple pages not just the homepage, do I need to call the critical.generateInline multiple times or can I just set the htmlTarget to */.html
from critical.
@solenoo your problem is another one than this issue.
Take a look at #38 for your multiple pages problem
from critical.
You'll need to call critical.generateInline
for each html file you want to process.
Support for multiple files is planed. See #38
from critical.
Just as feedback from yesterday: It works really well. PageSpeed went from 82 mobile / 91 Desktop to 94 mobile / 94 Desktop (just compression missing).
from critical.
I have a question since I can't get it to inline my CSS in the HTML, can I copy it in a different css file, so I can check if it's at least getting something, maybe that's the problem.
from critical.
@solenoo this can be achieved by passing the option styleTarget
to critical.generateInline
See: https://github.com/addyosmani/critical#generate-and-inline-critical-path-css
from critical.
Man I'm dumb I haven't been calling the css file the entire time, thank you so much :). One last request though, since I have smarty php in my html and when I use the critical task it changes all my " to ", how can I prevent that from happening ?
from critical.
i'm seeing the same 'toString' errors here (i'm a new user of critical and gulp). i got lost somewhere in this thread.. is the solution to install the github master of critical?
thanks
from critical.
Master should be working fine. We hope to get out a new release shortly.
from critical.
ok, do i need to remove the already installed version somehow and copy the github master into my working directory? (i didn't find a link explaining how to install the master version anywhere)
from critical.
npm install http://github.com/addyosmani/critical/tarball/master
from critical.
oh ok, thanks - i just ran that and am getting errors. do you prefer me to create a new issue for that?
from critical.
Yes, please open up a new issue if the error isn't already covered in this thread.
from critical.
Closing as this should be fixed by now.
Feel free to re-open if there's still something we didn't consider yet.
from critical.
Related Issues (20)
- critical just stucks at loading and does nothing HOT 2
- Remove query string from stylesheet path
- Print stylesheet unexpectedly gets `onload` attribute HOT 3
- Generated CSS is big HOT 8
- 'noscript)>[rel="stylesheet"]' is not a valid selector HOT 6
- Generate ciritical for multiple pages HOT 2
- Request: Add option to disable link media attribute wrapping HOT 1
- Rules within media queries duplicate when using multiple dimensions HOT 2
- Lots of css generated from below the fold
- Does not take redirects into account when looking for relative CSS HOT 2
- Does not take the <base HTML tag into account when looking for relative CSS HOT 7
- dimensions don't work HOT 2
- Error: Failed to launch the browser process! HOT 3
- typescript support ? HOT 1
- Add the option of a prefix path HOT 3
- On @container queries
- PageSpeed Insights consider CSS not deferred HOT 1
- Allowing internal functions to be imported HOT 3
- [✨] feat: Add the option of pass plain css HOT 2
- Several warnings appear when installing the latest version of critical HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from critical.