I would like to set up grunt sweet so that I can have it start watching my sweetjs-using files and compile them as they change.
However, I am new to making gruntfiles and there is simply not enough information in that link for me to know how to set it up. Searching for files that use grunt.loadNpmTasks('grunt-sweet'); I was able to find a file to use as a template but I cannot get it working.
This gruntfile
/*global module:false*/
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
sweet: {
content_dir: 'src',
publish_dir: 'build',
},
watch: {
sweet: {
files: [
'src/**'
],
tasks: 'sweet'
}
}
});
grunt.loadNpmTasks('grunt-sweet');
// Project tasks
grunt.registerTask('default', 'sweet');
};
Gives me
W:\sweetjs-playground> grunt sweet:watch
Running "sweet:watch" (sweet) task
Fatal error: Object #<Object> has no method 'done'
W:\sweetjs-playground> grunt sweet -v
Initializing
Command-line options: --verbose
Reading "Gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Initializing config...OK
Registering "grunt-sweet" local Npm module tasks.
Reading W:\sweetjs-playground\node_modules\grunt-sweet\package.json...OK
Parsing W:\sweetjs-playground\node_modules\grunt-sweet\package.json...OK
Loading "sweet.js" tasks...OK
+ sweet
Loading "Gruntfile.js" tasks...OK
+ default
Running tasks: sweet
Running "sweet" task
Verifying property sweet exists in config...OK
Fatal error: Object #<Object> has no method 'done'
Which seems like a success until it's not. What am I doing wrong here?
All I want is for it to automatically compile files in src into build
I'm not an expert on this, but you can try out this snippet. I hope it can help some way.
module.exports = function(grunt) {
grunt.initConfig({
sweetjs: {
src: {
files: [{
expand: true,
cwd: 'src/',
src: ['**/*.js'],
dest: 'build/'
}]
}
},
watch: {
sweetjs: {
files: ['src/**/*.js'],
tasks: ['sweetjs:src']
}
}
});
grunt.event.on('watch', function(action, filepath, target) {
if(action == 'changed' && target == 'sweetjs') {
grunt.config.set('sweetjs.src.src', [filepath]);
grunt.config.set('sweetjs.src.dest', filepath.replace(/^src/, 'build'));
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sweet.js');
grunt.registerTask('default', ['sweetjs']);
};
If it wont work, maybe your files path is the problem. Try out adding an extension src: ['src/**/*{.php,.html}'],
i dont know if thats the reason for your error, but i think so. delete the comma after sweets last config-property:
publish_dir: 'build', <--
Related
I'm trying to build a Grunt task that minifys my JS files and return a single minified JS file.
This is my gruntfile.js file:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
minified: {
files: {
src: [
'js/*.js',
],
dest: 'js/min/'
},
options: {
allinone: true
}
},
});
grunt.loadNpmTasks('grunt-minified');
};
When I run the task it does work, but it also returns an error.
> cmd.exe /c grunt -b "C:\Users\alucardu\documents\visual studio 2015\Projects\JS-demo\JS-demo" --gruntfile "C:\Users\alucardu\documents\visual studio 2015\Projects\JS-demo\JS-demo\Gruntfile.js" minified
Running "minified:files" (minified) task
Warning: Cannot read property 'yellow' of undefined Use --force to continue.
Process terminated with code 3.
Aborted due to warnings.
I've done a search action in my entire solution for 'yellow' but it doesn't return any results. Also when I empty both my JS files that are being minified it still returns the error.
Does anyone know why it's returning this error?
By removing the
options: {
allinone: true
}
The warning no longer showed up, but it also doesn't concat the files together. So I've added another task called concat. So now my gruntfile looks like this:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
watch: {
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'minified', 'uglify'],
},
},
concat: {
dist: {
src: ['js/*.js'],
dest: 'js/min/concat.js'
},
},
minified: {
files: {
src: ['js/min/concat.js'],
dest: 'js/min/minified.js'
},
},
uglify: {
my_target: {
files: {
'js/min/uglify.js': ['js/min/minified.jsconcat.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-minified');
grunt.loadNpmTasks('grunt-contrib-uglify');
};
And it seems to be working fine.
I'm trying to convert .css files to .sass files using 'grunt-sass-convert' npm module.
'Gruntfile.js' for the same is as follows:
'use strict';
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-sass-convert');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
Sass: {
options: {
// command line options here
style: 'expanded',
from: 'css',
to: 'sass'
},
files: {
// Target-specific file lists and/or options go here.
cwd: 'style',
src: '*.css',
filePrefix: '_',
dest: 'sass/'
}
}
});
grunt.registerTask('default',['Sass']);
};
I referred grunt-sass-convert npm module documentation for writing the GruntFile.js file.
While running the grunt command in cmd, I'm getting the following error:
Warning: Task "Sass" not found. Use --force to continue.
Aborted due to warnings.
I went through so many stackoverflow links regarding the same but I'm unable to fix it and All I understood that there's some error in .js file that's why it's throwing the error.
Directory structure I'm using is as here
Thanks..!!
I guess this would help you -
'use strict';
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
Sass: {
options: {
// command line options here
style: 'expanded',
from: 'css',
to: 'sass'
},
files: {
// Target-specific file lists and/or options go here.
cwd: 'style',
src: '*.css',
file_prefix: '_',
dest: 'sass/'
}
}
});
grunt.loadNpmTasks('grunt-sass-convert');
grunt.registerTask('default',['Sass']);
};
We are having some problems finetuning our Grunt setup. Our current project setup is like this. We have a Themes folder, in that themes folder there are different themes that all hold their own SCSS files and other bits related to that theme.
Our grunt file is setup like this with around 15 themes (leaving out default Grunt setup and JSHint because in the end Grunt is working):
compass: {
options: {
...
}
theme1: {
src: ['App/Themes/theme1/scss/**/*.scss'],
tasks: ['compass'],
options: {
sassDir: 'App/Themes/theme1/scss',
cssDir: 'App/Themes/theme1'
}
},
theme2: {
src: ['App/Themes/theme2/scss/**/*.scss'],
tasks: ['compass'],
options: {
sassDir: 'App/Themes/theme2/scss',
cssDir: 'App/Themes/theme2'
}
},
...
}
concurrent: {
watch: {
tasks: ['compass:theme1', 'compass:theme2', ..., 'compass:themeXX'],
options: {
logConcurrentOutput: true,
spawn: false
}
}
}
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concurrent']);
The actual issue then is that when we start the default task also x watch threads are started. Which have a lot of overhead for the small watch task they have to do.
The solution I'm looking for is a way to setup a single watch task that can trigger the specific theme compass compile. Is there a way to do that? Or is the current setup the only way to do it? So no other option than to have x watch tasks?
Thanks.
First, scaffold a watch task in your config object that watches files but doesn't execute any tasks. Using the glob pattern, tell the watcher to spy on all .scss files within the themes directory:
grunt.initConfig({
compress: {}, //your existing compress object goes here
watch: {
themes: {
files: ['App/Themes/**/*.scss'],
tasks: []
},
},
});
Next, you're going to add a grunt.event listener to your gruntfile. The listener event will expose the file changed (example: App/Themes/theme1/scss/foobar.scss). With that, you can now determine which compress target (theme1) to run:
grunt.event.on('watch', function(action, filepath, target) {
if (target === 'themes') {
var theme = filepath.split("/");
grunt.task.run('compress.' + theme[2]); //tells grunt to run "compress.theme1" based on this example
}
});
I am using grunt-contrib-watch and this sublime package sublime-grunt.
I am using the sublime-grunt package to start a watch session and livereload with the Chrome extension. Everything works great however once a 'watch' session is started what is the command to stop/kill/cancel a watch. I tried using a command in the sublime-grunt package called 'Grunt Kill Running Processes' and it tells me something has been canceled but if I change my style.scss file and save it, it compiles and updates are made to my html page, so 'watch' is still in effect. Right now I have to close down Sublime Text to kill the 'watch' session.
I am trying to use a variable for a path to my theme root directory but when I try to concat the variable with a string I received this error. What type of syntax should I use, do I need to create a variable in the package.json file?
Code
var theme_path = 'wp-content/themes/twentyfifteen/';
// Sass plugin
sass: {
dist: {
files: {
theme_path + 'style.css': theme_path + 'sass/style.scss',
}
}
},
// Error
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: C:\wamp\www\grunt\Gruntfile.js:31
>> theme_path + 'style.css': 'wp-content/th
emes/twentyfifteen/sass/style.scs
>> ^
>> Unexpected token +
Warning: Task "default" not found. Use --force to continue.
Here is my Gruntfile.js:
module.exports = function(grunt) {
// Theme Directory Path
var theme_path = 'wp-content/themes/twentyfifteen/';
// Configure main project settings
grunt.initConfig({
// Basic settings and info about our plugins
pkg: grunt.file.readJSON('package.json'),
// Watch Plugin
watch: {
sass: {
files: 'wp-content/themes/twentyfifteen/sass/*.scss',
tasks: ['sass','postcss','uglify'],
options: {
livereload: true,
},
},
},
// Sass plugin
sass: {
dist: {
files: {
'wp-content/themes/twentyfifteen/style.css': 'wp-content/themes/twentyfifteen/sass/style.scss',
}
}
},
// Postcss plugin
postcss: {
options: {
map: true, // inline sourcemaps
// or
map: {
inline: false, // save all sourcemaps as separate files...
},
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'wp-content/themes/twentyfifteen/style.css'
}
},
// Minify JS Uglify
uglify: {
dist: {
files: {
'wp-content/themes/twentyfifteen/js/functions.min.js': ['wp-content/themes/twentyfifteen/js/functions.js']
}
}
}
});
// Load the plugin
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Run plugin
grunt.registerTask('default', ['watch'] );
}
I think that tasks options can't have variable assigned, i don't have any source at the moment but i can suggest another way to do it:
you can use task params:
watch: {
sass: {
files: '<%= grunt.task.current.args[0] %>/sass/*.scss',
tasks: ['sass:<%= grunt.task.current.args[0] %>','postcss','uglify'],
options: {
livereload: true,
},
},
},
sass: {
dist: {
files: {
'<%= grunt.task.current.args[0] %>/style.css': '<%= grunt.task.current.args[0] %>/sass/style.scss',
}
}
},
and than
grunt.registerTask('default', ['watch:'+theme_path] );
This is a problem that i have already meet to make dynamic watch tasks
Hi I'm new to grunt and I'm having a problem getting it up and running with compass.
This is my Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
sassPath: 'templates/sass/',
cssPath: 'public/css/',
},
// Task configuration.
compass: {
dist: {
files: {
'<%= meta.cssPath %>*.css': '<%= meta.sassPath %>**/*.scss'
}
}
},
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-compass');
// Default task.
grunt.registerTask('default', ['compass']);
}
But when I run grunt --verbose I get this:
...
Running "default" task
Running "compass" task
Running "compass:dist" (compass) task
Verifying property compass.dist exists in config...OK
Files: templates/sass/ie.scss, templates/sass/print.scss, templates/sass/screen.scss, templates/sass/style.scss -> public/css/*.css
Options: (none)
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
Done, without errors.
So it looks like it sees the files, and even sees where to put them... what is going wrong?
EDIT: Just so people know the final answer... I thought I had tried this before without success, but this morning I ended up getting this to work:
compass: {
dist: {
expand: true,
cwd: '<%= meta.scssPath %>',
src: ['{,*/}*.scss'],
dest: '<%= meta.cssPath %>',
ext: '.css'
}
},
EDIT 2: Okay, for the life of me don't know why, but it only works when a config.rb was present... why would grunt use the compass config is another question...
I think the issue is your destination file. You have to specify an actual file, not *.css. Try tweaking your config slightly:
compass: {
dist: {
files: {
'<%= meta.cssPath %>compiled.css': '<%= meta.sassPath %>**/*.scss'
}
}
}