I'm relatively new to Grunt.js, setting up is quiet easy, but now I have 2 issues: 1) First, how do you track any folder inside a given sources folder? For example, images folder may itself contain images, as well as folders with images and folders with folders with images etc. 2) Is there a way to watch for images in it's primary (build) folder? Without any forever loop...
Here's my current config:
module.exports = function(grunt) {
grunt.initConfig({
jsDir: 'sources/js/',
jsDistDir: 'public/js/',
cssDir: 'sources/css/',
cssDistDir: 'public/css/',
concat: {
js: {
src: ['<%=jsDir%>*.js'],
dest: '<%=jsDistDir%>javascript.js'
},
css: {
src: ['<%=cssDir%>*.css'],
dest: '<%=cssDistDir%>styles.css'
}
},
min: {
dist: {
src: ['<%= concat.js.dest %>'],
dest: '<%=jsDistDir%>javascript.js'
}
},
cssmin: {
dist: {
src: ['<%= concat.css.dest %>'],
dest: '<%=cssDistDir%>styles.css'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'sources/images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'public/images/'
}]
}
},
watch: {
min: {
files: ['<%=jsDir%>*.js'],
tasks: ['concat:js', 'min']
},
cssmin: {
files: ['<%=cssDir%>*.css'],
tasks: ['concat:css', 'cssmin']
},
imagemin: {
files: ['sources/images/**/*.{png,jpg,gif}'],
tasks: ['imagemin']
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-yui-compressor');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'concat',
'min',
'cssmin',
'imagemin',
'watch'
]);
};
Thanks!
Question 1):
The Expression **/*
does exactly this. (see imagemin > dynamic > files > src). Inside the concat section you could do something like src: ['<%=jsDir%>**/*.js'],
Question 2): Use aa watch task:
Install: npm install grunt-contrib-watch --save-dev
( --save-dev
means write dependency to package.json file)
Configuration in Gruntfile.js:
(function () {
'use strict';
}());
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt); // auto load grunt tasks
var globalConfig = {
jsPath: 'js/',
cssPath: 'css/',
scssPath: 'scss/',
};
grunt.initConfig({
globalConfig: globalConfig,
pkg: grunt.file.readJSON('package.json'),
concat: {
// conf goes here
},
// your other tasks go here
imagemin: {
// conf goes here
},
watch: {
dev:{
files: ['<%= globalConfig.jsPath %>_*.js', '<%= globalConfig.scssPath %>**/*.scss'],
tasks: ['concat','imagemin', 'yourothertasks']
}
}
});
grunt.registerTask('default', ['concat', 'imagemin', 'yourothertasks', 'watch:dev']);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.