- Sass
- x
- module.scss
- module.scss
- y
- module.scss
- module.scss
- z
- module.scss
- module.scss
- services
- language a
- module.scss
- module.scss
- language b
- module.scss
- module.scss
- language c
- module.scss
- module.scss
- language a
- x
There is a team for each language service. They don't want to do a standard "watch/compile all the sass files" because there are so many, it takes about a minute to compile them all (that's for every little change they make).
So we want to allow them to watch for changes to just their specific language files and watch any files that are imported into those language files.
The first part is easy enough, we can set-up a watch for each language service, but the Sass watch only picks up changes to those language files, not any of the changes made to other Sass files that are imported into the language files.
Based on the above issue, I have set-up some Grunt watch sub tasks that say "watch all directories, but ignore these other specifically named directories" (you can see this in my Gruntfile example below). So when any Sass files are changed, we then call the appropriate sass sub task.
So for example if we run grunt watch:arabic then any changes to any Sass files (excluding any Sass files from inside a language directory which isn't arabic) will cause the sass:arabic sub task to run.
The problem with this solution is it isn't scalable. Every new language requires a developer to remember to edit/update the Gruntfile and then to re-update each of the Watch sub tasks so they include the new language directory be ignored (for the other languages already present).
I want to find a solution to my problem (one that is scalable and automated)
Personally I was thinking something along the lines of finding a way to dynamically generate Grunt sub tasks based on the folders within our /services/ directory -> but this means that the Gruntfile.js would need to have a task that is run on a regular basis to refresh that I'm guessing? But this just sounds like the totally wrong way of solving the problem.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
dir: {
static: './tabloid/webapp/static/',
static_sass: '<%= dir.static %>' + 'sass/',
static_css: '<%= dir.static %>' + 'stylesheets/'
},
sass: {
news: {
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true,
require: ['<%= dir.static_sass %>helpers/url64.rb']
},
expand: true,
cwd: '<%= dir.static_sass %>/services/news',
src: ['*.scss'],
dest: '<%= dir.static_css %>/services/news',
ext: '.css'
},
afrique: { /* effectively repeat the above 'news' property (but change directory to compile) */ },
arabic: { /* effectively repeat the above 'news' property (but change directory to compile) */ },
hausa: { /* effectively repeat the above 'news' property (but change directory to compile) */ },
hindi: { /* effectively repeat the above 'news' property (but change directory to compile) */ },
indonesia: { /* effectively repeat the above 'news' property (but change directory to compile) */ },
mundo: { /* effectively repeat the above 'news' property (but change directory to compile) */ },
newyddion: { /* effectively repeat the above 'news' property (but change directory to compile) */ },
russian: { /* effectively repeat the above 'news' property (but change directory to compile) */ }
},
watch: {
afrique: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
arabic: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
hausa: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
hindi: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
indonesia: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
mundo: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
news: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
newyddion: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/russian/*.scss'],
tasks: ['news']
},
russian: {
files: ['<%= dir.static_sass %>**/*.scss',
'!<%= dir.static_sass %>services/afrique/*.scss',
'!<%= dir.static_sass %>services/arabic/*.scss',
'!<%= dir.static_sass %>services/hausa/*.scss',
'!<%= dir.static_sass %>services/hindi/*.scss',
'!<%= dir.static_sass %>services/indonesia/*.scss',
'!<%= dir.static_sass %>services/mundo/*.scss',
'!<%= dir.static_sass %>services/news/*.scss',
'!<%= dir.static_sass %>services/newyddion/*.scss'],
tasks: ['news']
}
}
});
// Load NPM Tasks
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// Afrique Task
grunt.registerTask('afrique', ['sass:afrique']);
// Arabic Task
grunt.registerTask('arabic', ['sass:arabic']);
// Hausa Task
grunt.registerTask('hausa', ['sass:hausa']);
// Hindi Task
grunt.registerTask('hindi', ['sass:hindi']);
// Indonesia Task
grunt.registerTask('indonesia', ['sass:indonesia']);
// Mundo Task
grunt.registerTask('mundo', ['sass:mundo']);
// News Task
grunt.registerTask('news', ['sass:news']);
// Newyddion Task
grunt.registerTask('newyddion', ['sass:newyddion']);
// Russian Task
grunt.registerTask('russian', ['sass:russian']);
};