Skip to content

Instantly share code, notes, and snippets.

@jgrenat
Last active August 29, 2015 14:02
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jgrenat/9880551f22f6053817ca to your computer and use it in GitHub Desktop.
Gist contenant les parties de code de l'article "Grunt, un lanceur de tâches javascript 2/3"
npm install -g grunt-cli
npm init
# Répondez aux quelques questions simples pour créer le package.json
npm install grunt --save-dev
# Le save-dev permet d'ajouter la dépendance dans le package.json
module.exports = function(grunt) { };
module.exports = function(grunt) {
grunt.initConfig({
// Configuration des tâches
});
};
module.exports = function (grunt) {
// Charge les plugins Grunt automatiquement
require('load-grunt-tasks')(grunt);
grunt.initConfig({
// Configuration des tâches
});
};
npm install load-grunt-tasks --save-dev
module.exports = function (grunt) {
// Charge les plugins Grunt automatiquement
require('load-grunt-tasks')(grunt);
grunt.initConfig({
// Configuration des tâches
});
// La liste de tâches est vide, nous la remplirons par la suite.
grunt.registerTask('build', []);
};
npm install --save-dev grunt-contrib-copy
grunt.initConfig({
copy: {
dist: {
src: ['*.html', 'images/**/*'],
// Vous pouvez bien sûr rajouter d'autres fichiers selon les besoins
dest: 'dist/'
}
}
});
grunt.registerTask('build', ['copy:dist']);
npm install --save-dev grunt-contrib-clean
// La configuration
clean: {
dist: ['dist/*']
}
// [...]
// On rajoute la sous-tâche "dist" de la tâche "clean".
grunt.registerTask('build', ['clean:dist', 'copy:dist']);
npm install --save-dev grunt-contrib-cssmin
cssmin: {
dist: { // Le nom de notre sous-tâche est "dist"
files: {
'dist/public/global.min.css': ['css/**/*.css']
// On regroupe tous les fichiers CSS minifiés dans un global.min.css
}
}
}
// [...]
// On n'oublie pas de rajouter la tâche à notre build
grunt.registerTask('build', ['clean:dist', 'copy:dist', 'cssmin:dist']);
npm install --save-dev grunt-contrib-uglify
uglify: {
dist: {
files: {
'dist/public/scripts.min.js': ['js/**/*.js']
}
}
}
// [...]
grunt.registerTask('build', ['clean:dist', 'copy:dist', 'cssmin:dist', 'uglify:dist']);
<!-- build:{type} {destination} -->
{...}
<!-- endbuild -->
npm install --save-dev grunt-usemin
<!-- Pour les CSS : -->
<!-- build:css public/global.css -->
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- endbuild -->
<!-- Pour les JS : -->
<!-- build:js public/scripts.js -->
<script src="js/add.js"></script>
<script src="js/substract.js"></script>
<!-- endbuild -->
useminPrepare: {
html: {
src: ['index.html']
},
options: {
flow: {
steps: {
js: ['uglifyjs'],
css: ['cssmin'],
},
post: {}
}
}
}
usemin: {
html: 'dist/index.html'
}
grunt.registerTask('build', [
'clean:dist',
'copy:dist',
'useminPrepare',
'cssmin',
'uglify',
'usemin'
]);
sudo apt-get install nodejs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment