ember-cli-imagemin lossyPNG ImageMin.pngquant is not a function - ember.js

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')()
]
}
});

Related

Module <rootDir>/node_modules/vue-jest in the transform option was not found

I got an error and I need your help. Thank for watching this question.
My situation: I am configuring Drone CI tool for my project and I get this when I run unit test on drone.yml.
Validation Error:
Module <rootDir>/node_modules/vue-jest in the transform option was not found.
Configuration Documentation:
https://jestjs.io/docs/configuration.html
Here is my jest.conf.js
transform: {
"^.+\\.js$": "babel-jest",
".*\\.vue$": "<rootDir>/node_modules/vue-jest"
},
What I have tried:
Remove <rootDir>/node_modules/. But I got an another error Module vue-jest in the transform option was not found.. So I think it is not the right solution
npm install --save-dev vue-jest
and rerun your test
Take a note that vue-jest is currently (2022) distributed in 3 concurrent packages:
vue-jest
#vue/vue2-jest
#vue/vue3-jest
In my case I've upgraded some dependencies and I had to switch from vue-jest to #vue/vue3-jest.
So my jest.config.js has to change accordingly:
module.exports = {
...
transform: {
"^.+\\.vue$": "#vue/vue3-jest",
},
...
}

Change Ember build directory (dist folder) without command line flags

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"
}

Django Webpack compiling misc JS in brand new Django/ReactJS app to make 21,500 line file

I have been following the below tutorial to get Django and ReactJS working:
http://geezhawk.github.io/using-react-with-django-rest-framework
I started a brand new Django project, added an app called home, but have otherwise done nothing else except what is outlined in the tutorial.
Anyway, when I compile the JS it creates a file that is about 21,500 lines and 800kb. My ReactJS file is only about 20 lines and there is no other JS to speak of from the Django app. It seems like it is compiling dependencies in the virtualenv or something. Anyway to prevent this?
webpack.config.js
//require our dependencies
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
//the base directory (absolute path) for resolving the entry option
context: __dirname,
//the entry point we created earlier. Note that './' means
//your current directory. You don't have to specify the extension now,
//because you will specify extensions later in the `resolve` section
entry: './assets/js/index',
output: {
//where you want your compiled bundle to be stored
path: path.resolve('./assets/bundles/'),
//naming convention webpack should use for your files
filename: '[name]-[hash].js',
},
plugins: [
//tells webpack where to store data about your bundles.
new BundleTracker({filename: './webpack-stats.json'}),
//makes jQuery available in every module
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
module: {
loaders: [
//a regexp that tells webpack use the following loaders on all
//.js and .jsx files
{test: /\.jsx?$/,
//we definitely don't want babel to transpile all the files in
//node_modules. That would take a long time.
exclude: /node_modules/,
//use the babel loader
loader: 'babel-loader',
query: {
//specify that we will be dealing with React code
presets: ['react']
}
}
]
},
resolve: {
//tells webpack where to look for modules
modulesDirectories: ['node_modules'],
//extensions that should be used to resolve modules
extensions: ['', '.js', '.jsx']
}
}
A couple of things
React and jQuery are part of your bundle. Yes you only wrote ~20 lines of code, but you are also importing React into your project, and since you only have one entry defined, everything you import will get bundled into a single bundle (which may be fine for your needs). What's more, your Webpack config also imports jQuery globally. You can break dependencies up into their own bundle or into multiple bundles and load them on demand if needed.
You are bundling the development version of React. When Webpack runs and bundles your project it will do different things based on whether process.env evaluates to "development" or "production". The idea being to make development easier and build times faster during development. In the case of React, you are getting its development version with lots of comments and extra checks (more kilobytes) simply because your environment isn't set to "production".
Tree shaking, deduping, and minification are your friends. I'll let you look into these, but basically, tree shaking (part of Webpack 2) makes it so you only bundle the part of a library you actually use. In webpack 1.x, there's a deduping plugin that will remove duplicate sections of code, and minification will, well, minify your code. You can setup your Webpack config to run these steps only when being run in a production build environment.
Try swapping your plugins section out with this to start:
plugins: [
...(process.env === 'production' ? [
// set webpack process env to production
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify('production') },
}),
new webpack.optimize.DedupePlugin(), // webpack 1.x only
new webpack.optimize.UglifyJsPlugin({ comments: false }),
] : []),
//tells webpack where to store data about your bundles.
new BundleTracker({filename: './webpack-stats.json'}),
//makes jQuery available in every module
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
],

ember-cli 0.0.37 import new syntax and ember-data

I've recently upgraded from ember-cli 0.0.36 to 0.0.37 and have been struggling to import ember-data. Although seemingly simple, it's not working for me. In the Brocfile.js, the old import was
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
});
This was modified to comply with the new syntax:
app.import('vendor/ember-data/ember-data.js', { exports: { ember: ['default'] } });
however, I get the following error:
app.import(vendor/ember-data/ember-data.js) - Passing modules object is deprecated. Please pass an option object with modules as export key (see http://git.io/H1GsPw for more info).
I'm not sure how to proceed with this one so any help is much appreciated.
The new syntax is detailed here
As mentioned in the deprecated message this is the new syntax.
app.import({
development: 'vendor/ember-data/ember-data.js',
production: 'vendor/ember-data/ember-data.prod.js'
}, {
exports: {
'ember-data': ['default']
}
});
This error message was the result of leftovers from the old ember-cli-ember-data shim which was set to version 0.0.4 in the package.json file. I've changed it to 0.1.0 which is the latest as of this writing, removed (deleted) the old ember-cli-ember-data directory from the node_modules package directory and reran npm install. This resulted in the warning message disappearing.

Compiling Compass in an Ember-CLI project

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