i'm learning how to use grunt. So far i've successfully installed grunt both global and local. I've concatenate and minify one file. My cuestion is: how can i set the task of "watch" for grunt to concatenate two files create another and then minify that file.
If you are using grunt-contrib-uglify which can concatenate and minify files, you do not need to create a multiple task.
Instead, create a task to run the uglify task like below.
grunt.initConfig({
watch: {
uglify: {
files: ['scripts/{,*/}*.js'],
tasks: ['uglify']
}
},
uglify: {
dist: {
files: {
'scripts.js': [
'scripts/{,*/}*.js'
]
}
}
}
});
Related
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
}
});
Is there a way where one can just dry run a grunt task and see what the output would be if it was an actual file? I am using grunt requirejs task but need to check if it is properly configured.
Note: "grunt requirejs --no-write" does not work for me
grunt.initConfig({
requirejs: {
task: {
options: {
baseUrl: "a/b/c/directory",
mainConfigFile: "a/b/c/grunt_main.js",
name: "../grunt_main",
excludeShallow: ["../grunt_main"],
out: "a/b/c/directory/<%= version.name %>.js",
optimize: "uglify",
preserveLicenseComments: false
}
}
}
}
I'm just getting started with grunt and just trying to get a few basic tasks working.
Here's my Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
compass: {
dist: {
options: {
config: 'config.rb',
watch: true
}
}
},
livecopy: {
your_target: {
options: {
source: "C:/Websites/xxx/styles/screen.css",
target: "W:/Websites/xxx/styles/screen.css"
},
},
},
watch: {
assets: {
files: ['**//*.css', '**/*.js'],
options: {
livereload: true,
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-livecopy');
grunt.task.registerTask('default', ['compass','livecopy','watch']);
};
I can run each of these tasks individually without any issues. When I run the grunt default task, only the first task in the default task list runs. It doesn't matter which order they are in, only the first one runs.
What am I missing?
When you run Compass with the watch option it runs compass watch which is a blocking task. From the grunt-contrib-compass docs:
watch
Type: Boolean
Runs compass watch instead of compass compile. This will use Compass'
native watch command to listen for changes to Sass files and recompile
your CSS on changes. While much faster than running compass compile
each time you want to compile your Sass, Compass becomes a blocking
task. This means that if you would like to use it in conjunction with
another blocking task, such as watch, you will need to use it in
conjunction with a paralleling task such as grunt-concurrent.
While trying to do some kind of generic grunt task i got stuck while accessing variables/options.
I need some kind of global variable or something similar.
It seems I have overlooked something.
If I run grunt sassCompile:myprojectFolder, everything works fine
while grunt sassWatch:myprojectFolder does not.
I run it in verbose mode and it seems projectPath is empty while compass is being called by watch.
compass options (from verbose output):
sassCompile: config="projectRoot/myprojectFolder/config.rb" ...
sassWatch: config="config.rb" ...
This is the Gruntfile.js is used for testing:
What I am doing wrong?
(function() {
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
compass: {
dev: {
options: {
config: "<%= projectPath %>config.rb",
basePath: "<%= projectPath %>",
specify: ["<%= projectPath %>src/sass/style*.scss","!**/*ie*.scss"],
bundleExec: true
}
}
},
watch: {
css: {
files: ['<%= projectPath %>../**/*.scss'],
tasks: ['compass']
}
}
});
grunt.registerTask('sassCompile', 'compass', function (project) {
grunt.config('projectPath', 'projectRoot/' + project + '/');
grunt.task.run('compass');
});
grunt.registerTask('sassWatch', 'watch', function (project) {
grunt.config('projectPath', 'projectRoot/' + project + '/');
grunt.task.run('watch');
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
};
}());
This is definitely an interesting approach you have there – it took me a while to understand what is going on.
What happens when run grunt sassWatch:myprojectFolder is that the watch task gets started with the projectPath you supplied after the colon, but, when watch detects a change it runs the compass task without the configuration.
That is because grunt-contrib-watch runs it's tasks by starting a new grunt process. You could run the tasks inside the same process by using options: { spawn: false }, but that seems to be discouraged.
I would suggest you try this:
watch: {
css: {
files: ['<%= projectPath %>../**/*.scss'],
tasks: ['sassCompile:<%= projectPath %>']
}
}
That way watch will run sassCompile:myprojectFolder in the spawned grunt process, making sure the configuration gets transferred to the compass task.
At the grunt page there is a section about global variables, but they won't work across multiple processes.
It would be possible to start a new async process by hand and handover the needed variables.
You could take a look at here and possible extend it to accept parameters for the new processes.
I'm having some unexpected behavior with my Gruntfile. I've registered a task that looks like this: grunt.registerTask('dev', ['jekyll:server', 'watch:jekyll']) with the hopes that it will sequentially start a jekyll server, and then watch my project for specific file changes (using the grunt-contrib-watch plugin). Once it detects those changes, it would re-run jekyll:server automatically.
The problem I'm having is that when I run grunt dev, it will start the Jekyll server, but it will not run the watch commands. However, if I remove the server task from grunt dev, it will run the watch command as expected.
Below is the contents of my Gruntfile. Can anyone help me understand what is happening?
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
jekyll: {
server : {
server: true,
server_port: 4000,
exclude: ['node_modules']
},
prod: {
dest: './_site-release'
}
},
watch: {
jekyll: {
files: ['_posts/**/*.md', '_layout/*.html', '_includes/*.html', 'index.html'],
tasks: ['jekyll:server']
}
}
});
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', 'jekyll:server');
grunt.registerTask('dev', ['jekyll:server', 'watch:jekyll']);
grunt.registerTask('release', 'jekyll:prod');
};
The server option makes the task block since it's persistent. You can either use the tasks watch option or something like grunt-concurrent to run jekyll and watch concurrently:
grunt.initConfig({
concurrent: {
target: {
tasks: ['jekyll:server', 'watch'],
options: {
logConcurrentOutput: true
}
}
}
});
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('default', ['concurrent:target']);