i'm very new to grunt (and npm in general) so forgive me if I've missed something glaringly obvious!
I'm trying to set up my gruntfile (which has been working just fine before I started this particular challenge) to use the autoprefixer plugin, I followed the instructions on this blog http://grunt-tasks.com/autoprefixer/ but I'm receiving this error when i try and initialize grunt :
$ grunt
Running "postcss:dist" (postcss) task
Warning: Cannot read property 'postcss' of undefined Use --force to continue.
Aborted due to warnings.
And here is my gruntfile :
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
var autoprefixer = require('autoprefixer-core');
require('load-grunt-tasks')(grunt);
grunt.initConfig ({
uglify: {
my_target: {
files: {
'_/js/script.js' : ['_/components/js/*.js']
} //files
} //my_target
}, //uglify
compass: {
dev: {
options: {
config: 'config.rb'
} //options
}//dev
}, //compass
watch: {
options: {livereload: true},
scripts: {
files: ['_/components/js/*.js'],
tasks: ['uglify']
}, //script
sass: {
files: ['_/components/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.html'],
}
}, //watch
postcss: {
options: {
processors: [
autoprefixer({
browers: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
}).postcss
]
},
dist: {
files: {
'_/css/styles.css': '_/components/sass/*.scss'
}
}
}
}); //initConfig
grunt.registerTask('default', 'watch', ['postcss']);
} //exports
Am I missing something? (it's blatantly something stupid like a misplaced comma isnt it!!)
Thanks In advance
Ok so if anyone happens to stumble across this and has a similar problem here is my gruntfile that shows how i fixed the problem.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig ({
uglify: {
my_target: {
files: {
'_/js/script.js' : ['_/components/js/*.js']
} //files
} //my_target
}, //uglify
compass: {
dev: {
options: {
config: 'config.rb'
} //options
}//dev
}, //compass
watch: {
options: {livereload: true},
scripts: {
files: ['_/components/js/*.js'],
tasks: ['uglify']
}, //script
sass: {
files: ['_/components/sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.html'],
}
}, //watch
postcss: {
options: {
map: true,
processors: [
require('autoprefixer-core')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: '_/css/*.css'
}
}
}); //initConfig
grunt.registerTask('default', 'watch', ['postcss:dist']);
} //exports
Related
I'm trying to set up a couple of tasks for Grunt but there seems to be an error that I can't find. JSlint points out to the watch section with the following error:
Unexpected token, expected ,
While in the terminal I get:
SyntaxError: Unexpected identifier Warning: Task "default" not found. Use --force to continue.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none'
},
files: {
'compiled/style.css':'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none'
},
files: {
'compiled/style-min.css': 'sass/style.scss'
}
}
}
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
I believe you are missing a comma before Watch.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none'
},
files: {
'compiled/style.css':'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none'
},
files: {
'compiled/style-min.css': 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Hope this helps
Grunt should concatenate both my css and jQuery so I used this code:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
jquery: {
files: ['jquerytest/**/*.js'],
tasks: ['concat:js']
},
css: {
files: ['css/*.css'],
tasks: ['concat:css3']
},
scss:{
files: ['csstest/*.scss'],
tasks: ['compass:dist']
}
},
concat: {
js : {
options: {
separator: ',\n',
banner: 'jQuery.fn.extend({',
footer: '});'
},
files: {
src: ['jquerytest/general/MyFunJqueryLibrary.js', 'jquerytest/general/MySetJqueryLibrary.js'],
dest: 'jquery/MyJqueryLibrary.js'
},
},
css3 : {
options: {
separator: '\n'
},
files: {
src: ['css/MyLibraryCss.css', 'css/MyLibraryScss.css'],
dest: 'css/css.css'
},
},
},
compass: {
dist: {
options: {
sassDir: 'csstest',
cssDir: 'css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('concatjs', ['concat:dist1', 'concat:dist2']);
grunt.registerTask('default', ['watch']);
};
When running the watch task I get this message:
File "css\MyLibraryCss.css" changed.
Running "concat:css3" (concat) task
but nothing happens. However, when using the jQuery concat task it works, the problem happens only when I use two tasks inside concat.
You have problem with registering task. The task 'concat:dist1' and 'concat:dist2' does not exists. Instead you have to write 'concat:js' and 'concat:css3'.
When I run grunt command on my terminal, the concat taks doesn't create the concat/form.js, and I need it to minify the javascript code.
I have the next directory structure:
src/entry/form.js
src/form/simple-form.js
This is my Gruntfile.js ,
Is anything wrong with that?
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
form: {
options: {
separator: ''
},
dist: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
}
},
uglify:{
form:{
options: {
sourceMap: true,
souceMapIncludeSources: true
},
dist: {
files: {
'dist/test.min.js' : ['concat/form.js']
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:form', 'uglify:form']);
};
Final Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ''
},
form: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
},
uglify:{
options: {
sourceMap: true,
souceMapIncludeSources: true
},
form: {
files: {
'dist/test.min.js' : ['concat/form.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat', 'uglify']);
};
You use form and dist in the same time when probably it is a mistake. You should reduce this
concat: {
form: {
options: {
separator: ''
},
dist: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
}
},
to this
concat: {
options: {
separator: ''
},
form: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
},
See the examples how it should be done here
We're using Mean.io for a project and getting erratic behavior from Grunt.
When we make changes on different files (while Grunt is running, of course), Grunt may detect the changes or not. HTML changes are usually detected by Grunt, but CSS/JS changes not.
And even worst, we often have to reboot (CTRL+C, grunt -f) Grunt to make it displays the project correctly because it prints random errors that actually don't exist. And thus the page is not displayed correctly in the browser.
For instance:
/vagrant/vavel/node_modules/dependable/index.js:115
throw new Error("dependency '" + name + "' was not registered");
^
Error: dependency 'access' was not registered
Or:
/vagrant/vavel/node_modules/mongoose/lib/index.js:323
throw new mongoose.Error.MissingSchemaError(name);
^
MissingSchemaError: Schema hasn't been registered for model "User".
Use mongoose.model(name, schema)
These errors just disappear if we restart Grunt again (using "rs" or CTRL+C + grunt -f).
In fact, sometimes there is not any error displayed in console and the page doesn't show up well.
Are we doing something wrong with ow we are using Grunt?
Gruntfile.js
cat Gruntfile.js
'use strict';
var paths = {
js: ['*.js', 'test/**/*.js', '!test/coverage/**', '!bower_components/**', 'packages/**/*.js', '!packages/**/node_modules/**'],
html: ['packages/**/public/**/views/**', 'packages/**/server/views/**'],
css: ['!bower_components/**', 'packages/**/public/**/css/*.css']
};
module.exports = function(grunt) {
if (process.env.NODE_ENV !== 'production') {
require('time-grunt')(grunt);
}
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assets: grunt.file.readJSON('config/assets.json'),
clean: ['bower_components/build'],
watch: {
js: {
files: paths.js,
tasks: ['jshint'],
options: {
livereload: true
}
},
html: {
files: paths.html,
options: {
livereload: true,
interval: 500
}
},
css: {
files: paths.css,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: paths.js,
options: {
jshintrc: true
}
}
},
uglify: {
core: {
options: {
mangle: false
},
files: '<%= assets.core.js %>'
}
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
src: paths.css
},
cssmin: {
core: {
files: '<%= assets.core.css %>'
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
args: [],
ignore: ['node_modules/**'],
ext: 'js,html',
nodeArgs: ['--debug'],
delayTime: 1,
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: [
'server.js',
function() {
require('meanio/lib/util').preload(__dirname + '/packages/**/server', 'model');
}
]
},
src: ['packages/**/server/tests/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
//Load NPM tasks
require('load-grunt-tasks')(grunt);
//Default task(s).
if (process.env.NODE_ENV === 'production') {
grunt.registerTask('default', ['clean', 'cssmin', 'uglify', 'concurrent']);
} else {
grunt.registerTask('default', ['clean', 'jshint', 'csslint', 'concurrent']);
}
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
// For Heroku users only.
// Docs: https://github.com/linnovate/mean/wiki/Deploying-on-Heroku
grunt.registerTask('heroku:production', ['cssmin', 'uglify']);
};
I want to log javascript errors to server but the stacktrace is not useful with minified JS code. So I was thinking of using either Getsentry or Rollbar which shows proper stack trace with the help of sourcemaps. But I'm struggling to create sourcemap in first place.
I'm getting this error
"Destination (_build/js/app.js) not written because src files were empty."
Once it creates source map properly, there will be another problem i.e. rev will rename the file. I also need to leave the unminified concatenated file.
Below is my gruntfile.js (I've removed few bits out of it.)
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
jsFolders: {
src: [
'_build/js/ui',
'_build/js/vendor',
'_build/js/app',
'_build/js/*templates.js'
]
},
build: {
src: ['_build/**/*']
}
},
copy: {
build: {
files: [{
expand: true,
src: [
'index.html',
'img/**/*', //includes web.cofig also.
'img/**/*.svg',
'!img/**/*.psd',
'js/**/*', //includes web.cofig also.
'css/**/*', //includes web.cofig also.
'*.png',
'favicon.ico'
],
dest: '_build/'
}]
},
},
rev: {
option: {
algorithm: 'sha1',
length: 4
},
all: {
files: {
src: [
'_build/**/*.{js,css,eot,ttf,woff}'
]
}
}
},
useminPrepare: {
html: ['_build/index.html']
},
usemin: {
html: [
'_build/index.html'
],
css: [
'_build/css/**/*.css'
]
},
uglify: {
options: {
sourceMap: '_build/js/app.js.map',
},
js: {
files: {
'_build/js/app.js': ['_build/js/app.js']
}
}
},
cssmin: {
minify: {
expand: true,
cwd: '_build/css/',
src: '*.css',
dest: '_build/css/'
}
},
});
grunt.registerTask('build', [
'clean:build',
'handlebars',
'compass',
'autoprefixer',
'copy:build',
'useminPrepare',
'concat',
'uglify',
'cssmin',
'clean:jsFolders',
'rev',
'usemin',
]);
};
UPDATE
Tried #Andy's solution, it still shows the same error "Destination (_build/js/app.js) not written because src files were empty." and it also says below while building
uglify:
{ options:
{ sourceMap: true,
sourceMapName: '_build/js/app.js.map' },
js: { files: { '_build/js/app.js': [ '_build/js/app.js' ] } },
generated:
{ files:
[ { dest: 'dist\\js\\app.js',
src: [ '.tmp\\concat\\js\\app.js' ] } ] } }
Don't know where it got dest name from. My output folder is _build.
UPDATE2:
Refer to below links for better solution
https://stackoverflow.com/a/20574196/148271
https://github.com/gruntjs/grunt-contrib-uglify/issues/39#issuecomment-14856100
useminPrepare is merging the existing uglify config with its own, but nested under generated. Therefore this configuration for uglify works for me
grunt.initConfig({
uglify: {
generated: {
options: {
sourceMap: true
}
}
}
});
There is no simple solution to getting sourcemaps to work with the usemin flow.
Its a known problem that hasnt been addressed in a year it seems:
https://github.com/yeoman/grunt-usemin/issues/30
https://github.com/yeoman/grunt-usemin/issues/220
The options for uglify are:
sourceMap: true,
sourceMapName: 'path/to/name.map'
For example, in my GruntFile.js I use the name found in package.json:
sourceMap: true,
sourceMapName: 'dist/<%= pkg.name %>-<%= pkg.version %>.map'