I'm using Nodejs grunt module. I know grunt min option minifies a files. But now I need to obfuscate files like google closure compiler. Does grunt have that feature?
The grunt min task allows you to set UglifyJS (the grunt min tool) options, which can give you greater control on how the destination file is mangled and compressed.
https://github.com/cowboy/grunt/blob/master/docs/task_min.md#specifying-uglifyjs-options
https://github.com/mishoo/UglifyJS
from the grunt task_min doc:
Specifying UglifyJS options
In this example, custom UglifyJS mangle, squeeze and codegen options are
specified. The listed methods and their expected options are explained in
the API section of the UglifyJS documentation:
The mangle object is passed into the pro.ast_mangle method.
The squeeze object is passed into the pro.ast_squeeze method.
The codegen object is passed into the pro.gen_code method.
// Project configuration.
grunt.initConfig({
min: {
dist: {
src: ['dist/built.js'],
dest: 'dist/built.min.js'
}
},
uglify: {
mangle: {toplevel: true},
squeeze: {dead_code: false},
codegen: {quote_keys: true}
}
});
Related
Background:
I'm working on a chrome extension. I used the yeoman generator. It worked like a charm. After I deployed the extension, I needed to debug a few issues.
Problem:
The code is uglified. I can't set break points. I can hardly read it. It is also optimized. This makes it hard to read as well. I would like to tell Grunt to skip uglifying the code.
Attempted Solutions:
I tried to comment out the uglify task in the Grunt file. If I do this, not only is uglify not executed, but most of the scripts fail to copy into the "dist" directory.
I can deploy the application from the "app" directory. If I do this, my human written code is loaded rather than the "dist" values. While this works, I wish to learn more about the inner workings of Grunt. It seems likely that there is some mechanism by which uglifying may be disabled while preserving copying.
It's the usemin task that supplies targets to the uglify task. When you comment out the uglify task usemin can't complete its flow (by default concat and uglify) and the scripts never get copied.
So you must configure the flow in useminPrepare options. Like this:
[...]
useminPrepare: {
options: {
stripBanners: true,
dest: '<%= config.dist %>',
flow: {
steps: {
js: ['concat'], css: ['concat', 'cssmin']
},
post: {}
}
},
[...]
This way you can remove the uglify task from the build sequence (you must, as it will complaint that have no targets and fail).
Documentation here: https://github.com/yeoman/grunt-usemin#flow
I'm just getting started with the MEAN stack (https://github.com/linnovate/mean), so I'm pretty sure my question is going to look very basic to an expert, so my apologies in advance!
While I think it would be a gread addition to what this stack already has to offer, I cannot manage to integrate Uglify.js and stylus
Also someone already asked this, but it would make sense to me to use Jade template for both server and public views, at least for a matter of standardization.
I have tried playing with the grunt file and server.js, renaming some files, but all I managed to achieve so far, is break the original project...
Thanks in advance!
EDIT: Just found a fork of this project which has just added support for jade templates for public views: https://github.com/tutley/mean
This post explains how to integrate Stylus pre-processing to the MEAN stack: http://to-s.tk/integrate-stylus-to-the-mean-stack/
Short version:
Move public/css to a new assets/stylesheets and rename all the .css files to .styl
Install grunt-contrib-stylus through npm's package.json, as both a dev and runtime dependency.
-Configure stylus compilation in your Gruntfile
// ...
grunt.initConfig({
// ...
watch: {
// ...
stylus: {
files: ['assets/stylesheets/**/*.styl'],
tasks: ['stylus']
},
// ...
},
// ...
stylus: {
compile: {
options: {
paths: ['assets/stylesheets/**']
},
files: [{
dest: 'public/css/',
cwd: 'assets/stylesheets/',
src: '*.styl',
ext: '.css',
expand: true
}]
}
},
// ...
});
//...
//Load NPM tasks
// ...
grunt.loadNpmTasks('grunt-contrib-stylus');
// ...
Import views stylus files (or any substylus) in common.styl using #require statements
Remove references to views or other substylesheets in head.jade.
Then all assets/stylesheets/*.styl files should be automatically compiled into public/css/*.css, as long as grunt is running. To trigger a compile without relying on watch, you can run grunt stylus.
I'm optimizing my requirejs project with r.js. In my JS code, I need to replace an alias with the version number. It works fine when my build.js file contains the following:
({
appDir: "../",
baseUrl: "scripts",
mainConfigFile: 'project-config.js',
dir: "../dist",
uglify: {
defines: {
DEBUG: ['name', 'true'],
VERSION: ['string', '1.2.3.4']
}
}
})
I run it via:
node r.js -o build.js
However, I need the version number to be passed dynamically as I want to optimize it through some command line tool. I've read about the --define SYMBOL[=VALUE] option in the UglifyJS documentation, but couldn't make it to work together.
What should I change in the node command to pass a "define" parameter to UglifyJS? I want to override the VERSION definition from the build.js file (or simply remove it from the file).
According to James Burke who's responsible for r.js, this feature isn't supported yet - command line arguments are currently possible only for non-array attributes, see pull request 346.
The only one way to use Uglify in command line is using:
optimize=uglify2
My reference is the source
So I created a project using yeoman init and it uses requirejs, I wish to replace requirejs with almondjs to make it load faster. How can I do this?
AlmondJS is here: https://github.com/jrburke/almond
RequireJS is here: http://requirejs.org/
Yeoman: http://yeoman.io/
The only mention of require.js in Gruntfile.js is:
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
Make sure you are using Yeoman 1.0 and not an earlier version. It uses grunt-requirejs which has almond support. rjs was used in versions before 1.0.
See documentation at https://github.com/asciidisco/grunt-requirejs/blob/master/docs/almondIntegration.md. It appears that all you may need to do is add almond: true to the options for requirejs in your Gruntfile (or not depending on what you want to do--again see the documentation).
I've got some paths configured in require-config.js as follows:
var require = {
baseUrl: '/javascript',
paths: {
'jquery': 'jquery/jquery-1.8.1.min'
// etc. -- several paths to vendor files here
},
}
I am trying to get the optimization working for deployment. The docs say I should have a build.js that looks something like this:
({
baseUrl: 'javascript',
paths: {
'jquery': 'jquery/jquery-1.8.1.min'
},
name: 'main',
out: 'main-build.js'
})
Is there a way to have the optimizer read my config file instead of (or in addition to) build.js? I don't want to have to manually keep the paths configured the same in both files if they change.
I tried to just run node r.js -o path/to/require-config.js, but it threw an error, "malformed: SyntaxError: Unexpected token var"
Edit: for clarification, my require-config.js file is the config only, not my main module. I did this so I could use the same configuration but load a different main module when unit testing.
You'll need to adjust the way your config options are defined. Taken from the RequireJS documentation:
In version 1.0.5+ of the optimizer, the mainConfigFile option can be used to specify the location of the runtime config. If specified with the path to your main JS file, the first requirejs({}), requirejs.config({}), require({}), or require.config({}) found in that file will be parsed out and used as part of the configuration options passed to the optimizer:
So basically you can point your r.js build file to your config options that will also be shared with the browser.
You will need to make use of the mainConfigFile option
For other's reference:
https://github.com/jrburke/r.js/blob/master/build/example.build.js
The build settings (no need to repeat your config.js lib inclusions here):
baseUrl: 'app',
name: 'assets/js/lib/almond', // or require
// Read config and then also build it into the app
mainConfigFile: 'app/config.js',
include: ['config'],
// Needed for almond (and does no harm for require)
wrap: true,