I started using Grunt to build my app; used the uglify module to minify my scripts . Loading the minified file leads to an error
Original : https://github.com/mayur-arora/imageDrive/blob/master/scripts/content_script.js
Minified:https://github.com/mayur-arora/imageDrive/blob/master/scripts/content_script.min.js
If I manually add "})" at the end of the minified file, it works. But should I have to do this ? Why does Uglify get it wrong ?
Similar is the case with
Original:https://github.com/mayur-arora/imageDrive/blob/master/scripts/imageDrive.js
and
minified:https://github.com/mayur-arora/imageDrive/blob/master/scripts/imageDrive.min.js
This one has - unexpected token var
I used 'remove-logging' before 'uglify' and now it works fine. Uglify followed by 'remove-logging' was causing this.
Related
i am having an issue with webpack and my css file. Whenever i run "npm start", i get this error :
ERROR in ./ticker.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
I read that it requires a loader for css files however i have installed 'style-loader' and 'css-loader' but apparently it still won't work. Any ideas ?
Here is :
webpackconfig, package file, ticker.css file
Thanks guys !
I tried to delete and recreate the node_modules directory, use raw loader, change the loaders order.
Turned out my node.js version wasn't up to date which caused some conflicts with some packages. Think about updates guys. :)
As the title says, when I run "ng serve" angular-cli generates normal css whereas I expect to get the minified version.
Is there any specific setting to use for angular-cli-build, or some additional plugin to install and use?
This is my angular-cli-build.js
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'angular2-cookie/**/*.js'
]
});
};
ng build --prod --env=prod
or
ng serve --prod
Will minify and add a file hash for you.
the --prod tells it to minify hash, and gzip.
the --env=prod tells it to use your prod environment constants file.
which would look like this
You can use
# --env=<your_env>
# --no-sourcemap
# minify => ./minify.js
ng build --env=prod --no-sourcemap && node minify
minify.js
// npm i --save-dev minifier fs-jetpack
const jetpack = require('fs-jetpack');
const path = require('path');
const minifier = require('minifier');
const files = jetpack.list(path.join(__dirname, 'dist'));
console.log(files);
for (const file of files) {
if (/.*(\.js|\.css)$/g.test(file)) {
console.log(`Start ${file}`);
const filePath = path.join(__dirname, 'dist', file);
minifier.minify(filePath, {output: filePath});
}
}
console.log('End');
James' commands DO work and DO minify even when using ng serve --prod.
However you may see something like the following in Chrome and get confused:
That doesn't look minified does it!
Look more carefully and you'll see js:formatted indicating that the pretty print feature was enabled.
Opening the URL http://localhost:4200/main.5082a3da36a8d45dfa42.js directly in a new tab showed me that the CLI was indeed minifying it fully.
You can click the {} icon to turn this feature off, but it seems to like to disappear once the code has been pretty printed so you may need to reload the page and click it quickly.
In 2020 it is just enough to use --prod flag, when building project:
ng build --prod
I am using the grunt-webpack. Trying to start the webpack-dev-server gives this error
Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
Before you close this question, let me just say: webpack is bundling the files properly. The grunt-webpack plugin provides 2 tasks: grunt-webpack and grunt-webpack-dev-server. When I try HMR with the server, it is failing. Otherwise it works fine.
I have included babel-loader with presets es-2015 and react.
Any ideas?
I'm trying to get the default Yeoman Webapp to work with Assemble.io.
I followed this tutorial Using assemble.io with yeoman.io’s webapp Gruntfile
Got it up & running (partially), the first problem I have is that livereload isn't kicking in when changes are made to the .hbs files. When I manually refresh, I can see the changes that were made.
This is my Grunt file.
Second problem is that 'grunt build' gives me the following error:
Running "requirejs:dist" (requirejs) task
{ [Error: Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".
at Function.build.createConfig ([MY DIRECTORY]/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25109:19)
]
originalError: [Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".] }
I googled around & when I add the following to requirejs:dist:options
appDir: '<%= yeoman.app %>/', dir: 'build'
Then this error is solved, but the next appears:
No "concat" targets found.
Warning: Task "concat" failed. Use --force to continue.
Versions:
Yeoman 1.0.4
Node 0.10.21
Bower 1.2.7
Grunt-cli 0.1.9
Grunt 0.4.1
Anyone seeing the problem? Thanks!
See this line in your gist. It's trying to call a task called concat in your Gruntfile, but that task doesn't exist. There may have been a change with the Yeoman webapp generator or you might have had a copy/paste issue or something. The assemble part of your Gruntfile looks fine.
I think you can remove the concat and carry on.
I am trying to use uglify with grunt to concat and minify some files. I have already used the npm to install grunt-contrib-uglify.
I have the following in my grunt.js file: (I have removed some other tasks for anonymity)
module.exports = function(grunt) {
'use strict';
grunt.loadNpmTasks('grunt-contrib-uglify');
uglify: {
options: {
sourceMap: 'app/map/source-map.js'
},
files: {
'app/dist/sourcefiles.min.js': [
'app/test_js/test.js'
]
}
}
};
I then run:
grunt uglify
but I keep getting the following error:
Warning: Maximum call stack size exceeded Use --force to continue.
If I use force, the grunt task never stops running.
Can someone tell me where I am going wrong? I am tearing my hair out on this one.
I had the same problem, using an other Grunt plugin called recess.
The error message was not explicit.
Warning: Cannot read property 'message' of undefined Use --force to continue.
But the verbose mode showed that my task was called hundred of times.
The problem was that I created a "cyclic dependency" (causing an infinite loop) when I registered my task.
grunt.registerTask('recess', ['recess']); //does not work => cyclic dependency!
The first parameter of registerTask method is an "alias task" and has to be different from the task names defined in the second parameter.
I corrected like this:
grunt.registerTask('my-recess-task', ['recess']);
And I runned the task calling this (in the Command prompt window)
grunt my-recess-task
And then it was OK!
More about registerTask() method, from grunt API:
http://gruntjs.com/api/grunt.task#grunt.task.registertask
I also met this problem, i solved this by removing
grunt.registerTask('uglify', ['uglify']);
before i solved this, i ran grunt uglify -v to check what happend.
I found it because that where you using this grunt.loadNpmTasks('grunt-contrib-uglify'); ,it implicitly executes the grunt.registerTask('uglify', ['uglify']); ^_^