I'm completely new at Grunt, Bower etc. and have spent the evening playing around with a basic Gruntfile.js that contains the following:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all: ['Gruntfile.js']
},
bower_concat: {
all: {
dest: 'assets/libs/<% pkg.name %>-bower.js',
mainFiles: {
'flux': ['dist/Flux.js']
}
}
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['jshint', 'bower_concat']);
};
However, when I run grunt bower_concat I get
Running "bower_concat:all" (bower_concat) task
Done, without errors.
but no JavaScript file is outputted in the destination folder (and I've tried running jshint, which does not complain).
I've tried lots of things, from e.g. removing mainFiles to including bowerOptions: { relative: false }.
The structure of my project is
Web
assets
libs
bower_components
flux
node_modules
grunt
grunt-bower_concat
grunt-contrib-jshint
load-grunt-tasks
In the Web folder, I have bower.json, Gruntfile.js and package.json and it's from this folder that I run the command grunt bower_concat.
Does anyone have any idea what I'm doing wrong?
Related
I'm currently learning how to use PostCSS with Grunt in one of my classes. Asked my professor if they could help me, they said the Gruntfile.js looked fine, but maybe the issue was my file name being lowercase. I changed it to Gruntfile.js and am receiving the same error. It is automatically supposed to create the custom.min.css, but due to the error (located below), it does not. I contacted my professor, but it seems that we've hit a dead-end.
Every time I create the JS file for Grunt, save it in the correct folder, and I run grunt in my Command Prompt, I receive the following error:
C:\Users\name\Desktop\grunt-boilerplate>
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Invalid or unexpected token
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
My JS coding looks like this:
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({
browsers: 'last 2 versions'
}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'css/custom.css',
dest: 'css/custom.min.css',
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-postcss');
// Default task(s).
grunt.registerTask('default', ['postcss']);
};
What am I doing wrong?
Error loading "Gruntfile.js" tasks
As for the error in the terminal, it seems like you're missing this line at the start of the file:
module.exports = function (grunt) {
See: https://gruntjs.com/getting-started#an-example-gruntfile
Now about the first problem.
Packages
First of all, check the correct installation of all your node modules.
Open your terminal
cd to your project root, where the package.json is located
Do npm install
Do npm install autoprefixer grunt grunt-postcss pixrem cssnano --save-dev
Autoprefixer usage
You are probably using the autoprefixer plugin in a wrong way: you need to move the browsers option into your package.json file:
Gruntfile.js
...
processors: [
require('pixrem')(),
// No autoprefixer 'browsers' option
require('autoprefixer')(),
require('cssnano')()
]
...
package.json
{
...
// 'browserslist' option at the end of the file just above the last curly brace
'browserslist': [
'last 4 versions',
'> 0.5%'
]
}
See: https://github.com/browserslist/browserslist#browserslist-
Changing dist property
You could try changing your dist syntax using files property:
...
dist: {
// src: 'css/custom.css',
// dest: 'css/custom.min.css',
files: {
'css/custom.min.css': 'css/custom.css'
}
}
...
Summary
The whole Gruntfile.js should look something like that:
module.exports = function (grunt) {
grunt.initConfig({
// This is probably a leftover from the example Gruntfile.js
// pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('pixrem')(),
// No autoprefixer 'browsers' option
require('autoprefixer')(),
require('cssnano')()
]
},
dist: {
// src: 'css/custom.css',
// dest: 'css/custom.min.css',
files: {
'css/custom.min.css': 'css/custom.css'
}
}
}
});
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['postcss']);
};
This is my first time trying to set up Grunt. I'm seeing that only one out of two defined tasks is running at a time. If I switch the default task from 'watch' to 'sass', only the sass task will run (and vice versa). So that makes me think the code for both tasks is correct, but maybe some other configuration setting or registerTask type function is needed.
Is there anything wrong with my Gruntfile.js that would cause this issue?
Gruntfile.JS
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// --- SASS
sass:{
dist:{
options:{
style:'expanded',
sourcemap:'none',
},
files:{
'style.css':'SCSS/style.scss'
}
}
},
// --- WATCH
watch:{
css:{
files: '**/*.scss',
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// grunt.registerTask('default',['sass']);
grunt.registerTask('default',['watch']);
}
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
},
},
That's it, just add the sass task to watch and whenever the files change, the task will be run.
Alternatively, don't register watch as a task at all! You can set sass as the default grunt task, and simply type grunt watch to kick off the watch task.
Now if you're using something like the Nuget package in VS I understand registering watch, but if that's the case I suggest trying out Powershell, at least for the ease of installing new packages, node modules, getting a debug message for JS errors, etc.
I have configured GruntJS in Visual Studio 2015 to minify my JavaScript files using UglifyJS. Works fine.
However, I'd like this to happen only when I have Visual Studio in Release mode. In Debug mode I'd like to debug my JavaScript files and minified JavaScript is hard (impossible) to debug.
I used the following to solve this problem using the ASP.Net 5 task runner.
My solution has the following folder hierarchy.
Solution
->wwwroot
->Scripts
->app.js
->Controllers
->controller1.js
->controller2.js
1.) A file watcher watches the Scripts directory and all sub folders.
2.) When a file change is detected all *.js files are copied from the script folder to my wwwroot directory in it's script folder.
3.) Then an uglify task runs on the script folder in the wwwroot directory, this minifies it into a single app.js file which is referenced by the html application.
The uglify task has the sourceMap option turned to turn which allows javascript debuggers to reference the scrips while in debug mode but when running not in debug mode the minified script is used.
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
copy: {
main: {
files: [
{
expand: true,
src: ['Scripts/app.js', 'Scripts/Controllers/**'],
dest: 'wwwroot'
}
]
}
},
uglify: {
my_target: {
files: { 'wwwroot/app.js': ['wwwroot/Scripts/app.js', 'wwwroot/Scripts/**/*.js'] },
options : {sourceMap : true}
}
},
watch: {
scripts: {
files: ['Scripts/app.js','Scripts/**/*.js'],
tasks: ['copy:main', 'uglify']
}
}
});
grunt.registerTask('default', ['copy:main', 'uglify', 'watch:scripts']);
};
I have a less compile grunt task where relative path to less files from grunt installed folder is raw/less/source_map/
here is the grunt file.
Gruntfile: (EDIT: changed to #Yogesh Khatri's code still same issue)
module.exports = function(grunt) {
grunt.initConfig({
less: {
files: { "raw/less/source_map/style.css" : "raw/less/source_map/style.less" }
},
watch: {
js: {
files: ['raw/less/source_map/style.less'],
tasks: ['default'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less']);
};
on running it the command line displays
^CMacPro:grunt sagiavinashvarma$ grunt watch
Running "watch" task
Waiting...
>> File "raw/less/source_map/style.less" changed.
Running "less:files" (less) task
Done, without errors.
Completed in 1.862s at Tue Dec 09 2014 15:03:37 GMT+0530 (IST) - Waiting...
but there is no style.css output. I have written the simplest grunt task without any options.
can anyone point out whats wrong with this.
Edit:
I got the problem. It isn't working because less task need a specific target to work.
Try to change the code like this
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
files: { "raw/less/source_map/style.css" : "raw/less/source_map/style.less" }
}
},
watch: {
js: {
files: ['raw/less/source_map/style.less'],
tasks: ['default'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less']);
};
I got the error by running grunt --verbose which shows lot more information about the tasks. It gave me the output like
Verifying property less.files exists in config...OK
File: [no files]
Options: report="min", banner=""
>> Destination not written because no source files were provided.
of which searching led me to this :- grunt-contrib-less cannot find source files even though path is correct
My directory structure looks like below:
--myapp/
--client/
--build/
--css/
--js/
--angular/ #angular libraries here
--angular.js
--angular-resource.js
--angular-ui-router.js
--jquery/ #jquery libraries here
--jquery.js
--app.js
--index.html
--server/ #All server related files here
--Gruntfile.js
My Grunt file so far looks like this
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
dist: {
src: ['client/js/angular/*.*]
dest: 'client/build/angular-build.js'
}
}
});
};
This is as far as I have gotten. Don't see any easy grunt file tutorials on this.
Th ouput I am looking for is all angular libraries in one output file. All jquery libraries in another.. all css libraries in third.
How do i achieve this ?
A few things:
You don't know it, but you're using grunt-contrib-concat, so you'd better npm install that and grunt.loadNpmTasks('grunt-contrib-concat'); it.
Concat doesn't support wildcards. This is good, because the order that these files are included is going to matter. angular.js must be included before angular-resource.js
I've included a rough template of what your Gruntfile needs to look like to accomplish this, but know that this is not the right way to do this. You should be loading your dependencies using something like bower and serving them individually, or using something like Browserify or Require.js. You'll come to see the value of that as the project progresses.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
angular: {
src: [
'client/js/angular/angular.js',
'client/js/angular/angular-resource.js',
'client/js/angular/angular-ui-router.js'
]
dest: 'client/build/angular-build.js'
},
jquery: {
src: ['client/js/jquery/jquery.js']
dest: 'client/build/jquery-build.js'
},
...
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};