I'm using ember-cli v0.0.23, and am trying to get the broccoli-compass package working with my project, and I've run into some problems.
First, in my Brocfile, I have replaced the standard Ember-CLI "blueprint" version of:
var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');
with the following:
var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, 'app/styles/app.scss', {
outputStyle: 'expanded',
sassDir: 'app/styles',
imagesDir: 'public/images/'
});
However, when I run an ember build, I receive the following output:
$ ember build
[broccoli-compass] Error: Command failed: Errno::ENOENT on line ["155"] of /Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb: No such file or directory - /Users/gaker/Sites/project/tmp/tree_merger-tmp_dest_dir-GrWa8Zva.tmp/app/styles/app.scss
Run with --trace to see the full backtrace. The command-line arguments was: `compass compile app/styles/app.scss --relative-assets --sass-dir app/styles --output-style expanded --images-dir public/images/ --css-dir "../compass_compiler-tmp_dest_dir-eFsq51BG.tmp"`
If I try to run the compass command that is output in the error in my terminal, it does create the file, only it is up one directory from my project root (notice --css-dir in the output).
I have tried many combinations of options sassDir, imagesDir, etc when calling compileCompass and this is the closest I've gotten.
So any ideas on what I can do to successfully get compass, broccoli-compass and ember-cli playing nicely?
Thanks in advance
You can use ember-cli-compass-compiler addon to compile compass in ember-cli apps.
Just do the following in your ember-cli app:
npm install --save-dev ember-cli-compass-compiler
This is all you need to do, everything works as expected from now on. It compiles your appname.scss file into appname.css on ember build or ember serve command.
Try this (added prefix and cssDir):
var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, prefix + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: prefix + '/styles',
imagesDir: 'public/images/',
cssDir: '/assets'
});
Steffen
Related
Confused about what could have caused this to stop working, I installed solana and anchor and was able to test projects.
anchor --version anchor-cli 0.26.0
nvm use 16.16.0
Now using node v16.16.0 (npm v8.11.0)
anchor init hello-world
yarn install v1.22.19
warning package.json: No license field
info No lockfile found.
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 6.07s.
Initialized empty Git repository in /home/user/Code/anchor-second-test/hello-world/.git/
hello-world initialized
cd hello-world && anchor build works. Making no changes, I run anchor run test
1) hello-world
Is initialized!:
TypeError: Cannot read properties of undefined (reading 'methods')
at /home/user/Code/anchor-second-test/hello-world/tests/hello-world.ts:13:30
at Generator.next (<anonymous>)
at /home/user/Code/anchor-second-test/hello-world/tests/hello-world.ts:31:71
at new Promise (<anonymous>)
at __awaiter (tests/hello-world.ts:27:12)
at Context.<anonymous> (tests/hello-world.ts:11:36)
at processImmediate (node:internal/timers:466:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Here is hello-world.ts test file as generated:
import { Program } from "#project-serum/anchor";
import { HelloWorld } from "../target/types/hello_world";
describe("hello-world", () => {
// Configure the client to use the local cluster.
anchor.setProvider(anchor.AnchorProvider.env());
const program = anchor.workspace.HelloWorld as Program<HelloWorld>;
it("Is initialized!", async () => {
// Add your test here.
const tx = await program.methods.initialize().rpc();
console.log("Your transaction signature", tx);
});
});
I have tried using node lts 16.16.0 instead of the latest lts, starting in a clean directory, checking that typescript was installed, running yarn install before running anchor build command. I checked that the solana keypair and json file was generated in the correct folder.
Go to this ../target/types/hello_world directory and make sure it exports like this
export type HelloWorld = {}
since you have this import
import { HelloWorld } from "../target/types/hello_world";
also, you did not show anchor import . It should be
import * as anchor from "#project-serum/anchor";
I am trying to make my Ember project build to a directory outside of the project and for future builds I don't want to use command line flags each time.
ember build --output-path=/not-dist will work for me but I want Ember to add the flag automatically.
outputPaths: {
app: {
html: '../presentation/index.cfm',
css: {
'app': '../presentation/assets/ember-presentation-viewer.css'
},
js: '../presentation/assets/ember-presentation-viewer.js'
},
vendor: {
css: '../presentation/assets/vendor.css',
js: '../presentation/assets/vendor.js'
}
}
I have tried this as per the ember-cli documentation but ember-presentation-viewer.css was insisting on getting built in the dist directory with all the additional paths put there.
Is there a way to do this?
Go to package.json. Change scripts/build command:
"scripts": {
"build": "ember build --output-path=/not-dist"
},
From now on, run:
npm run build
You can configure your .ember-cli.js file to specify flags that should always be included in your command line builds (in lower camel case), as per this page in the Ember docs. To change the output directory you'll want to add the following line: "outputPath": "../../example-folder/presentation".
So your final .ember-cli.js should look like this:
{
/*
Ember CLI sends analytics information by default. The data is completely
anonymous, but there are times when you might want to disable this behavior.
Setting `disableAnalytics` to true will prevent any data from being sent.
*/
"disableAnalytics": false,
"outputPath": "../../example-folder/presentation"
}
I'm trying to enable the lossyPNG property in the ember-cli-imagmin addon to create a small file size for my .pngs. My EmberApp in ember-cli-build.js includes imagemin like so:
imagemin: {
interlaced: true,
optimizationLevel: 3,
progressive: true,
lossyPNG: true,
pngquant: {
speed: 1,
quality: 80
}
}
The dependencies object in my package.json includes:
{ ...
"ember-cli-imagemin": "0.4.0",
"imagemin": "3.2.2",
"imagemin-pngquant": "4.2.2",
...
}
However, whenever I run ember build I get the following error:
The Broccoli Plugin: [object Object] failed with:
TypeError: ImageMin.pngquant is not a function
This error points me to this line in broccoli-imagemin. If I set lossyPNG to false in ember-cli-build.js then I receive no error, but my pngs could be optimized further based on the results from pagespeed. What am I missing to be able to use pngquant to further optimize my png images?
broccoli-imagemin, which ember-cli-imagemin depends upon, is the problem. Since it hasn't been updated since Nov 2014, it uses an older version of imagemin, but the package.json specification allows imagemin v3.x. pngquant was removed as a default property in imagemin v3.2.0. So if you force the installation of imagemin v3.1.0 in your package.json it should work.
If you want to use a more recent version of imagemin look at this PR. I'd try to use that branch directly. You can install that branch directly from the repo with:
ember install https://github.com/kanongil/ember-cli-imagemin.git#v5-imagemin
This branch changes how imagemin works. Instead of passing options, it looks like you just pass the plugins that you want to use, and pass their options directly in to them.
var app = new EmberApp({
imagemin: {
plugins: [
require('imagemin-jpegtran')({ progressive: true }),
require('imagemin-pngquant')({speed: 1, quality: 80}),
require('imagemin-svgo')()
]
}
});
I have a javascript library "c-liberator" that I need to use in my Ember application I have imported it manually as it's not a npm or bower package but its dependencies aren't being included, when I try to use one of its functions I get this error
Uncaught TypeError: md5 is not a function
I tried importing the exact md5 module that "c-liberator" uses and If I use it in a function in application.js it works fine so the md5 module works fine it's just that "c-liberator" is not using it.
The code below runs fine in application.js but throws the uncaught type error in "c-liberator"
var creds = md5('username' + ':' + 'pass');
I have also tried installing the md5 library one at a time with bower and npm and confirmed it was referenced by bower.json and package.json, this didn't change anything.
The minified md5 library is in c-liberator/libmd5.min.js and I have also tried putting into ember-cli-build.js which didn't work either
app.import('vendor/c-liberator/c-liberator.js', {
amdModule: 'clib'
});
app.import('vendor/c-liberator/lib/md5.min.js', {
amdModule: 'md5'
});
Edit
Here is that code that I'm running 'creds' works fine but when the same code is executed by Clib.login() it throws that error
cLiberate: function() {
var creds = md5('username' + ':' + 'pass');
alert(creds);
var C;
Clib.login('testuser#email.co.nz', 'notarealpassword', '1000000', function(userAgent) {
C = userAgent;
console.log('Login successful');
}, function(data, status) {
alert('Login error');
});
}.on('init'),
Any help would be really appericated.
Thanks
Hamish
I got it working with code I had already tried
app.import('vendor/c-liberator/lib/md5.min.js', {
amdModule: 'md5'
});
No clue why it didn't work before
I just started working with Ember-CLI 0.0.36 and I'm stuck with the Gravatar example code from the Ember.js homepage.
I did
> bower install --save JavaScript-MD5
> ember generate component gravatar-image
Brocfile.js
[...]
app.import('vendor/JavaScript-MD5/js/md5.js');
[...]
app/components/gravatar-image.js
import Ember from 'ember';
export default Ember.Component.extend({
size: 200,
email: '',
gravatarUrl: function() {
var email = this.get('email'),
size = this.get('size');
return 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size;
}.property('email', 'size')
});
After starting ember server I'll get the following error message:
xyz/components/gravatar-image.js: line 11, col 48, 'md5' is not defined.
1 error
How can I tell the component to use JavaScript-MD5?
To get this to work I used:
bower install blueimp-md5 --save-dev
and added import in Brocfile.js
app.import('bower_components/blueimp-md5/js/md5.js');
then add "md5" to predef array as mentioned by Oliver to suppress md5 warning.
JavaScript-MD5 does't export any AMD-Modules, if I see it right. But it defines window.md5. So your app.import will include it in vendor.js and you can call window.md5 in the component.
That's just a jshint linter message.
Open your .jshintrc file, add "md5" to the "predef" object and you are fine.
You might need to install the ember-cli-md5 package. This will install all the required dependencies in your node modules.
Use this npm install --save-dev ember-cli-md5 to install ember-cli-md5.
Once installed you will need to generate md-5 which will install the browser package via bower.
Use this to generate md-5 ember generate md-5.
So, you need to perform following two steps:-
npm install --save-dev ember-cli-md5
ember generate md-5