We Keep Coding

Uglify not working with Grunt Watch

I have a pretty basic setup with sass, watch and uglify but for some reason I can't get watch to detect when a js file is saved. It works fine for SCSS/CSS (compiles and reloads.) If I run 'grunt uglify' it bundles my JS files, and if watch is running (in another console instance) it will detect it and trigger the reload.
I've tried lots of combinations and I have a feeling it's something really dumb I'm doing/not doing but I'm just not seeing it.
my gruntfile.js:
module.exports = function(grunt) {
grunt.registerTask('default', ['sass', 'uglify']);
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: { 'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/main.css': 'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/main.scss' }
}
},
uglify: {
my_target: {
files: {
'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/js/site.js': [
'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/lib/jquery/dist/jquery.js',
'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/lib/*.js'
]
}
}
},
watch: {
options: {
livereload: 35729,
},
html: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/Views/*.cshtml'],
},
sass: {
options: {
livereload: false
},
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/*.scss'],
tasks: ['sass']
},
css: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/main.css'],
tasks: []
},
scripts: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/js/site.js'],
tasks: ['uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
};

Look at your watch config:
scripts: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/js/site.js'],
tasks: ['uglify']
}
You are only watching for a single js files changes called site.js. To watch all your sources use this config:
scripts: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/lib/*.js'],
tasks: ['uglify']
}
Use the same pattern as in the uglify config. I assumed you are not going to modify jquery itself.

grunt uglify showing error

I am getting the error though all seems to be right in the code. Can someone help?
gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Setting up some base links
meta: {
basePath: '../'
},
//Reading package.json file
pkg: grunt.file.readJSON('package.json'),
// Concat Configuration
concat: {
options: {
separator: ';'
},
dist: {
src: ['<%= meta.basePath %>scripts/*.js'],
dest: '<%= meta.basePath %>scripts/concated.js'
}
},
// Uglify Configuration
uglify: {
build: {
src: ['<%= meta.basePath %>scripts/concated.js'],
dest: '<%= meta.basePath %>scripts/uglify.js'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat','grunt-contrib-uglify');
// Default task
grunt.registerTask('default', ['concat','uglify']);
};
ERROR
Already seen the links:
grunt uglify task failing
new to grunt - warning: task "concat, uglify" not found
However, "grunt concat" runs fine and provide results. No issues. But this uglify seems to create a lot of pain.

try this excerpt from http://gruntjs.com/configuring-task:
uglify: {
static_mappings: {
// Because these src-dest file mappings are manually specified, every
// time a new file is added or removed, the Gruntfile has to be updated.
files: [
{ src: 'lib/a.js', dest: 'build/a.min.js' },
{ src: 'lib/b.js', dest: 'build/b.min.js' },
{ src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js' },
{ src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js' },
]
}
}

Register Grunt tasks without grunt.initConfig()

I want my gruntfile.js to be naturally structured so that micro-tasks follow each other one by one.
Suppose I have the following structure:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
movedTyping: 'options...'
},
copy: {
typing: 'options...',
lessVariables: 'options...',
html: 'options...'
},
less: {
compile: 'options...'
},
typescript: {
compile: 'options...'
}
});
grunt.registerTask('build', [
// TYPESCRIPT
'typescript:compileSingle',
'copy:typing',
'clean:movedTyping',
// LESS
'less:compile',
'copy:lessVariables',
// HTML
'copy:html'
]);
But I would like to achieve the other structure:
grunt.registerTask('build', function () {
// TYPESCRIPT
grunt.task.run('typescript', 'options...');
grunt.task.run('copy', 'options...');
grunt.task.run('clean', 'options...');
// LESS
grunt.task.run('less', 'options...');
grunt.task.run('copy', 'options...');
// HTML
grunt.task.run('copy', 'options...');
});
How?

You can set properties of the object by using . (dot) notation. So nested structure data can also be set. I haven't come across a more cleaner approach and will be happy to see a better approach.
grunt.registerTask('build', function () {
// TYPESCRIPT
grunt.config.set('typescript.compile','<options>');
grunt.task.run('typescript');
......................
});

In order to achieve this I created NPM module create-grunt-tasks.
Now my grunt file looks like this:
// Gruntfile.js
module.exports = function (grunt) {
require('create-grunt-tasks')(grunt, function (create) {
create.task('build')
// Compile TypeScript and move typing
.sub('typescript', {
src: 'src/index.ts',
dest: 'build/index.js',
options: { module: 'amd', target: 'es5', declaration: true }
})
.sub('copy', {
expand: true, flatten: true,
src: 'build/index.d.ts',
dest: 'build/typing/index.d.ts'
})
.sub('clean', ['build/index.d.ts'])
// Copy HTML
.sub('copy', {
expand: true, flatten: true,
src: 'src/index.html',
dest: 'build/index.html'
});
});
}

Grunt-Browserify Ignore Option

I have a React app that I am transforming, uglifying and browserfying via Grunt. My grunt file looks like this...
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'./Scripts/build/App.js': ['./Scripts/src/**/*.js']
},
options: {
browserifyOptions: {
debug: true
},
transform: [ require('grunt-react').browserify ],
ignore: './Scripts/src/**/*-test.js'
}
}
},
uglify: {
my_target: {
files: {
'./Scripts/build/App-min.js': ['./Scripts/build/App.js']
}
}
},
watch: {
scripts: {
files: ['./Scripts/src/**/*.js'],
tasks: ['browserify', 'uglify'],
options: {
spawn: false
},
},
},
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
}
You will notice the ignore property of the browserify task is telling it to ignore any file with -test.js in the filename, the reason being that my tests are stored in folders directly next to the file I am testing (as seems to be the convention when looking at the React Flux examples) and I don't want the test files being bundled in to my app.js file. Can anyone tell me if I am doing this wrong because so far it doesnt seem to be working at all? The test files get bundled into app.js and then I get console errors about jest not being defined.

Did a bit of lateral Googling and found a post on stack Here
It seems that you can add files to the src array and if you prefix them with a '!' it marks them as ignored files.
My now working grunt file....
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'./Scripts/build/App.js': ['./Scripts/src/**/*.js', '!./Scripts/src/**/*-test.js']
},
options: {
browserifyOptions: {
debug: true
},
transform: [ require('grunt-react').browserify ]
}
}
},
uglify: {
my_target: {
files: {
'./Scripts/build/App-min.js': ['./Scripts/build/App.js']
}
}
},
jest: {
options: {
coverage: true,
testPathPattern: /.*-test.js/
}
},
watch: {
scripts: {
files: ['./Scripts/src/**/*.js'],
tasks: ['browserify', 'uglify'],
options: {
spawn: false
},
},
},
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-jest');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
}

Using both Compass and Autoprefixer in Grunt

Curious about whether there’s a way to use both Autoprefixer and Compass in Grunt without having to specify a different output path for each task.
I currently have my .scss files in a folder named source. The compass task compiles these into a folder named build. I want to then run Autoprefixer without having to specify another different output path (i.e. still be in the build directory).
Is it not possible to run Autoprefixer on a compass compiled CSS file without specifying a different output path? Is it possible to run both at the same time perhaps?
Here’s the section of my gruntfile it relates to if it’s of any help. What I run in terminal is grunt watch:
compass: {
options: {
sassDir: 'style/source',
cssDir: 'style/build',
outputStyle: 'expanded',
}
},
watch: {
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass'],
options: {
spawn: false,
}
}
},
Refs:
https://github.com/nDmitry/grunt-autoprefixer
https://github.com/gruntjs/grunt-contrib-compass

If you do not specify an output location for Autoprefixer, it will just use the input location and overwrite the files. Here’s the updated section of the gruntfile if it’s of help to anyone:
autoprefixer: {
css: {
src: 'style/build/**.css',
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass', 'autoprefixer:css'],
options: {
spawn: false,
}
}
}

You may also want to add map: true to the autoprefixer call.
Here is a working copy for your goal :
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
autoprefixer: {
css: {
src: 'css/*.css',
options: {
map: true
}
}
},
compass: {
css: {
options: {
config: 'config.rb'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass:css', 'autoprefixer:css'],
options: {
interrupt: true
}
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};