module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
files: [
{expand: true,cwd:"js/" ,src: ['libs/*'], dest: '../test/js/libs/'},
{expand: true,cwd:"js/" , src: ['models/*'], dest: '../test/js/models/'}
]
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask("testcopy",["copy"] );
);
I am learning grunt and I am facing below issue while copying .
Warning: undefined is not a function Use --force to continue.
and file not copied from src to destination
It's not the solution to your problem. But for things like copy or delete i always use the cli-commands directly with: https://github.com/sindresorhus/grunt-shell
grunt-contrib-copy is a multi-target task, which means you have to give a "name" (called a target) to each of its configurations - that way you can define and call multiple copy operations (see http://gruntjs.com/configuring-tasks#task-configuration-and-targets).
You do that by inserting names between "copy" and its parameters. Below is an example where I called the target "main":
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
main: {
files: [
{expand: true,cwd:"js/" ,src: ['libs/*'], dest: '../test/js/libs/'},
{expand: true,cwd:"js/" , src: ['models/*'], dest: '../test/js/models/'}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask("testcopy",["copy:main"] );
};
Related
I have a folder with differents design project, on each one I may have scss files to compile. So I did a Gruntfile to watch on all this folders for the scss files and I want to compile them in their directory. But it' actually not working because of this error :
Running "sassAll" task
Running "sass:animating-rocket" (sass) task
Verifying property sass.animating-rocket exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.animating-rocket" missing. Use --force to continue.
Aborted due to warnings.
It seems that a variable is not define on the config scope...
My Gruntfile looks like this :
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
src: ['<%= grunt.task.current.args[0] %>/*.scss'],
dest: '<%= grunt.task.current.args[0] %>',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['**/*.scss'],
tasks: ['sassAll'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('sassAll', function () {
gruntUtils.sassTasks.forEach(function (param) {
grunt.task.run('sass:' + param);
});
});
var gruntUtils = {
sassTasks: ['animating-rocket', 'hamburger-animation']
};
grunt.registerTask('default', ['sassAll', 'watch']);
};
It works but I don't understand what the hell I did, I need to know if the "js", "css" properties is what the task looks for???
module.exports = function(grunt) {
grunt.initConfig({
concat: {
js: {
src: [
'src/intro.js',
'src/core/*.js',
'src/outro.js',
'src/com/*.js'
],
dest: 'builds/barefoot-js.full.js'
}
},
uglify: {
js: {
src: 'builds/barefoot-js.full.js',
dest: 'builds/barefoot-js.min.js'
},
},
cssmin: {
minify: {
src: 'css/barefoot-js.css',
dest: 'builds/barefoot-js.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-aetheon-cssmin');
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
}
It works but I don't understand what the hell I did, I need to know if the "js", "css" properties is what the task looks for???
Check out http://gruntjs.com/configuring-tasks
When a task is run, Grunt looks for its configuration under a property
of the same name.
So for the concat task there is a corresponding concat part in the grunt configuration object.
That concat task specification is done in the subobject
js: {
src: [
'src/intro.js',
'src/core/*.js',
'src/outro.js',
'src/com/*.js'
],
dest: 'builds/barefoot-js.full.js'
}
It specifies what to do. So the target for this task is js.
The uglify task has a target js and the cssmin task has a target minify.
I've done a fair bit of searching but can't seem to come up with a full answer to this.
I'm using grunt to manage my sass flow and I've been trying to find a way to output multiple css styles from grunt.
For example:
base.scss should have two outputs the first being style.css which has the expanded css style.
The second should be style.min.css which has the compressed css style.
How can I configure my gruntfile to do this for me?
You can do this by having two configurations, one outputting expanded CSS and the other compressed. Then register your task to run both. Your grunt file should look something like this:
Example
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
dev: { // This outputs the expanded css file
files: {
'style.css': 'base.scss'
}
},
prod: { // This outputs the compressed css file
options: {
outputStyle: 'compressed' // Minify output
},
files: {
'style.min.css': 'base.scss'
}
}
}
});
grunt.registerTask('default', ['sass:dev', 'sass:prod']); // Task runs both
}
Here is a more complete solution of what belongs in gruntfile.js, improving upon what Colin Bacon has already posted. By default grunt's pkg is already set to read package.json in the current directory, so no need to write that. You just need to install the jit-grunt plugin (besides the watch and sass plugins of course) to get my answer working.
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
sass: {
expanded: { // Target
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'style.css': 'style.scss' // 'destination': 'source'
}
},
compressed: { // Target
options: { // Target options
style: 'compressed'
},
files: { // Dictionary of files
'style.min.css': 'style.scss' // 'destination': 'source'
}
}
},
watch: {
styles: {
files: ['**/*.scss'], // which files to watch
tasks: ['sass'],
options: {
spawn: false // speeds up watch reaction
}
}
}
});
grunt.registerTask('default', ['sass', 'watch']);
};
Just add a new manifest file in your styles folder. For example, you have normally main.scss, if you create main2.scss and import some files in there. It will create a file for each manifest file you have.
If your sass task looks something like this (default yeoman webapp generator):
sass: {
options: {
sourceMap: true,
includePaths: ['bower_components']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
}
The file section sass read all .scss/.sass files and copy those to .tmp/styles. Later, copy task move those to dist/styles.
my task is the following:
htmlmin : {
dist : {
options : {
removeComments : true,
collapseWhitespace : true
},
files : {
'index.html' : 'index-src.html'
}
}
},
this works fine when i have just one html file on my site, so this processes index-src.html into minified index.html.
what if i have 100 other html files to process? i don't want to manually list them in my gruntfile.
how can i abstract the file name and tell grunt to minify my src file to the corresponding production file? in my case they are:
source file is [name]-src.html
production file is [name].html
i'm guessing it's just a matter of syntax, but i don't know what to write.
thanks! :)
See the Globbing Patterns section of the Grunt Documentation.
I believe you'll just have to change your param files object to:
'index.html' : '*-src.html'
Update
Re-reading your question, I realized you needed a 1-1 file conversion for dynamic source and destination file names.
For that see Building the files object dynamically
I have yet to use this in my project but the syntax looks straight forward. You may need to change your src vs production naming convention to a folder based convention.
/source/name.html (source folder)
/build/name.html (destination folder)
Example
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'source/', // Src matches are relative to this path.
src: ['*-src.html'], // Actual pattern(s) to match.
dest: 'build/', // Destination path prefix.
ext: '.html', // Dest filepaths will have this extension.
extDot: 'first' // Extensions in filenames begin after the first dot
}
]
module.exports = function (grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
controlCss: {
src: ['UI.controls/assets/css/*.css'],
dest: 'UI.controls/assets/css/min/production.css'
},
controlJs: {
src: ['UI.controls/assets/js/*.js'],
dest: 'UI.controls/assets/js/min/production.js'
},
coreJs: {
src: ['UI.core/assets/js/*.js'],
dest: 'UI.core/assets/js/min/production.js'
},
dist: {
src: ['UI.controls/assets/templates/*.htm'],
dest: 'UI.controls/assets/templates/min/production.min.htm'
}
},
cssmin: {
controlCss: {
src: 'UI.controls/assets/css/min/production.css',
dest: 'UI.controls/assets/css/min/production.min.css'
}
},
uglify: {
controlJs: {
src: 'UI.controls/assets/js/min/production.js',
dest: 'UI.controls/assets/js/min/production.min.js'
},
coreJs: {
src: 'UI.core/assets/js/min/production.js',
dest: 'UI.core/assets/js/min/production.min.js'
}
},
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
expand: true,
cwd: 'build',
src: ['UI.controls/assets/templates/*.htm'],
dest: 'UI.controls/assets/templates/min/production.min.htm'
}
}
});
// 2. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// 3. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin', 'uglify', 'htmlmin']);
};
I'm new to setting up my own grunt, and this is what I have come up with. I was just wondering if someone could look it over and give me some hints/advice.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
coffee: {
compile: {
expand: true,
flatten: true,
cwd: 'src/coffee',
src: ['*.coffee'],
dest: 'src/js/',
ext: '.js'
}
},
concat: {
css: {
src: [
'src/css/*'
],
dest: 'css/.css'
},
js: {
src: [
'src/js/*'
],
dest: 'js/package.js'
}
},
cssmin: {
css: {
src: 'css/package.css',
dest: 'css/package.min.css'
}
},
uglify: {
js: {
files: {
'js/package.min.js': ['js/package.js']
}
}
},
watch: {
aspx: {
files: ['*.aspx', '*.master']
},
css: {
files: ['src/css/*'],
tasks: ['concat:css', 'cssmin']
},
coffee: {
files: ['src/coffee/*'],
tasks: ['coffee:compile']
},
js: {
files: ['src/js/*'],
tasks: ['concat:js', 'uglify']
},
livereload: {
files: ['*.aspx', '*.master', 'css/*.css', 'js/*.js'],
options: { nospawn: true, livereload: true }
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['coffee:compile','concat:css', 'cssmin:css', 'concat:js', 'uglify:js', 'watch']);
};
It does work, and reloads and compiles perfectly. I was just wondering if there may be a more effiecent way to handle this. Being my first gruntfile I know it is very far from perfect.
I would recommend load-grunt-tasks in order to cut down on the complexity of the main Gruntfile.js. It's incredibly simple to use. It allows you to split up the Gruntfile.js into a number of smaller JS files stored in a separate Grunt folder, for example:
/root
/Grunt
cssmin.js
coffee.js
watch.js
...
And then your main Gruntfile.js to load in your tasks is simply, again for example:
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
}
It's all held together with YAML file called aliases.yaml that sits in the Grunt folder that details the Grunt commands and their associated processes. So with this in the YAML file:
lint:
- clear
- jshint
- jscs
You could run grunt lint and it would run those tasks.
I've found it a) a complete lifesaver, and b) helped me understand Grunt at a whole different level.
I've made an example repo for you to help explain what I'm talking about. I hope it's of some help.