Grunt regarder et connecter
Je suis un peu nouveau pour grogner et je veux l'utiliser avec Jekyll et une compilation MOINS.
Mon problème maintenant est que j'ai déjà une fonction de compilation LESS entièrement fonctionnelle avec une tâche de rechargement et de surveillance en direct et que je peux créer mon site jekyll via grunt, mais comment exécuter quelque chose comme le jekyll serve ou grunt-connect et grunt watch simultanément? Je veux une tâche grognante qui fournit la surveillance de mes fichiers LESS, etc., crée le site jekyll et exécute ensuite un petit serveur Web avec grunt-connect ou autre.
Mon Gruntfile.js jusqu'à présent:
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'js/*.js',
'!js/scripts.min.js'
]
},
less: {
dist: {
files: {
'css/styles.min.css': [
'less/app.less'
]
},
options: {
compress: true,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: false,
sourceMapFilename: 'css/styles.min.css.map',
sourceMapRootpath: '/'
}
},
dev: {
files: {
'css/styles.min.css': [
'less/app.less'
]
},
options: {
compress: false,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: true,
sourceMapFilename: 'css/styles.min.css.map',
sourceMapRootpath: '/'
}
}
},
uglify: {
dist: {
files: {
'js/scripts.min.js': [
'vendor/bootstrap/js/transition.js',
'vendor/bootstrap/js/alert.js',
'vendor/bootstrap/js/button.js',
'vendor/bootstrap/js/carousel.js',
'vendor/bootstrap/js/collapse.js',
'vendor/bootstrap/js/dropdown.js',
'vendor/bootstrap/js/modal.js',
'vendor/bootstrap/js/tooltip.js',
'vendor/bootstrap/js/popover.js',
'vendor/bootstrap/js/scrollspy.js',
'vendor/bootstrap/js/tab.js',
'vendor/bootstrap/js/affix.js',
'vendor/*.js',
'js/_*.js'
]
},
options: {
// JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
// sourceMap: 'assets/js/scripts.min.js.map',
// sourceMappingURL: '/app/themes/roots/assets/js/scripts.min.js.map'
}
}
},
watch: {
less: {
files: [
'less/*.less',
'less/bootstrap/*.less'
],
tasks: ['less:dev']
},
js: {
files: [
'<%= jshint.all %>'
],
tasks: ['jshint', 'uglify']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: true
},
files: [
'_site/*'
]
}
},
clean: {
dist: [
'css/styles.min.css',
'css/styles.min.css.map',
'js/scripts.min.js',
'_site/*'
]
},
jekyll: { // Task
options: { // Universal options
bundleExec: true,
src : '<%= app %>'
},
dist: { // Target
options: { // Target options
dest: '<%= dist %>',
config: '_config.yml'
}
},
serve: { // Another target
options: {
serve: true,
drafts: true
}
}
},
connect: {
server: {
options: {
keepalive: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-connect');
// Register tasks
grunt.registerTask('default', [
'clean',
'less:dist',
'uglify',
'jekyll:dist'
]);
grunt.registerTask('dev', [
'watch'
]);
};
Vous devez indiquer à connect quel répertoire servir dans la configuration en utilisant l'option "base", dans ce cas, ce serait le répertoire _site statique. Vous pouvez également changer le port de ce que vous voulez, mais vous finissez par naviguer vers localhost: 9009 avec mon exemple
connect: {
server: {
options: {
livereload: true,
base: '_site/',
port: 9009
}
}
}
Vous voudrez également ajouter une tâche de surveillance lorsque vous modifiez vos modèles html. Quelque chose comme ça fonctionnerait.
watch: {
html: {
files: ['**/*.html', '!_site/**/*.html'],
tasks: ['jekyll:dist']
}
}
Créez ensuite une tâche "servir" comme l'a suggéré Wallace.
// Start web server
grunt.registerTask('serve', [
'jekyll:dist',
'connect:server',
'watch'
]);
Enfin, lancez "grunt serve" dans la ligne de commande et accédez à localhost avec le port que vous avez spécifié.
Comme commenté par @jiggy
Le changement clé est de ne pas définir keepalive sur true. Keepalive bloquera toutes les tâches suivantes de s'exécuter. Tant que la connexion est suivie de la surveillance, le serveur ne s'arrêtera pas.
J'ai passé 2 jours à essayer désespérément toutes les configurations de gruntfile que je pouvais trouver sur Internet. Jamais travaillé. Ensuite, j'ai trouvé ceci https://stackoverflow.com/a/24765175/1541141 . Utilisation grunt-contrib-connect, NE PAS grunt-connect. grunt-connect bloque ... J'espère que cela aide.
Je pense que le cœur de votre solution est de créer une nouvelle tâche ou de modifier une tâche existante, comme ceci:
// Start web server
grunt.registerTask('serve', [
'jekyll:dist',
'connect:livereload',
'watch'
]);
... que vous exécuteriez avec un $ grunt serve. less, jshint, uglify et connect sont déjà inclus sous watch.