grunt watch & se connecter
Je suis un peu nouveau pour grunt et souhaitez l'utiliser avec Jekyll et certaines MOINS de de la compilation.
Mon problème est maintenant, j'ai déjà pleinement opérationnel MOINS comipiling avec live reload et regarder tâche et peut construire mon jekyll site par le biais de grognement, mais comment puis-je exécuter quelque chose comme la jekyll serve
ou grunt-connecter et grunt watch
simultanément?
Je veux un grognement tâche qui offre la regarder de mon MOINS de fichiers etc, construit le jekyll site, puis exécute un petit serveur web avec grunt-connecter ou quoi que ce soit.
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 vous connecter pour publier un commentaire.
Vous devez dire à connecter ce répertoire à servir dans la configuration à l'aide de la "base" de l'option, dans ce cas, il serait statique _site répertoire. Vous pouvez aussi changer le port pour tout ce que vous voulez, mais vous finirez la navigation vers localhost:9009 avec mon exemple
Vous aurez également à ajouter une montre tâche lorsque vous changez de modèles html. Quelque chose comme ce serait le travail.
Ensuite à créer un "service", qui tâche comme Wallace suggéré.
Enfin exécuter "grunt de servir" dans la ligne de commande et accédez à localhost avec le port que vous avez spécifié.
Comme indiqué par @jiggy
J'ai passé 2 jours en essayant désespérément à chaque gruntfile-configuration que j'ai pu trouver sur internet. N'a jamais travaillé. Puis j'ai trouvé ce https://stackoverflow.com/a/24765175/1541141.
Utilisation
grunt-contrib-connect
, PASgrunt-connect
.grunt-connect
bloque...Espérons que cela aide.
Je pense que le coeur de votre solution est de créer une nouvelle tâche ou modifier une tâche existante, comme suit:
...qui vous irait avec un
$ grunt serve
.less
,jshint
,uglify
etconnect
sont déjà inclus dans leswatch
.$ grunt <task>
. Exécuter n'importe quelle combinaison de quoi que ce soit, de payer une certaine attention à l'ordre de chargement si une tâche dépend d'un autre être exécuté en premier.