Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Archivos "gulpfile.js" para integrar en "Jekyll"

Gulpfiles Jekyll

Jekyll-BS Scaffold completo

Después de instalar las dependencias con $ npm install hay que ejecutar el comando $ jekyll build para hacer el primer complidao del sitio, después (y el resto de veces) ya se puede ejecutar el comando $ gulp para trabajar en el proyecto.

El comando $ gulp ejecuta los mismos procesos que el comando $ jekyll s con una diferencia, el servidor local se monta con Browser-Sync.

Hay una tarea sass para procesar el archivo .css compilado por Jekyll, la tarea se ejecuta con el comando $ gulp sass y no está integrada en el compilado, hay que ejecutarla después de detener el comando $ gulp

Gulp-Sass Scaffold completo

Despues de instalar las dependencias con $ npm install hay que ejecutar la teréa $ gulp jekyll-build para hacer el primer complidao del sitio, despues (y el resto de veces) ya se puede ejecutar el comando $ gulp para trabajar en el proyecto.

Este archivo es una ampliación del anterior, y en este caso se integra la tarea sass con el compilado de archivos .scss

OJO!!! Primero hay que deshabilitar el compilado de archivos .scss a Jekyll.

OJO!!! Para deshabilitar el compilado de archivos .scss a Jekyll hay que mover el archivo principal .scss (archivo con imports) dentro de la carpeta _sass después hay que borrar la cabecera front matter de ese mismo archivo

Archivo package.json

El archivo package.json es valido para instalar las dependencias de los 2 archivos gulpfile.js

Fuentes

FORK: http://aaronlasseigne.com/2016/02/03/using-gulp-with-jekyll/

TAREA SASS: https://gist.github.com/BCasal/1eb6747760abe62472aa

/* FORK: http://aaronlasseigne.com/2016/02/03/using-gulp-with-jekyll/ */
/* TAREA SASS https://gist.github.com/BCasal/1eb6747760abe62472aa */
// DEPENDENCIAS
const child = require('child_process');
const browserSync = require('browser-sync').create();
const gulp = require('gulp');
const gutil = require('gulp-util');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
// RUTAS
const siteRoot = '_site';
const sassSrc = '_sass/style.scss';
const sassDest = 'assets/css/';
// TAREA SASS
// * 1 * // archivo de origen (archivo con imports)
// * 2 * // compresión desarrollo (legible)
// * 3 * // auto-prefijos (más info https://github.com/ai/browserslist)
// * 4 * // destino producción
// * 5 * // copia y renombra con prefijo .min
// * 6 * // compresión producción (minificada)
// * 7 * // destino producción
gulp.task('sass', () => {
gulp.src(sassSrc) // * 1 * //
.pipe(sass({outputStyle: 'nested'})) // * 2 * //
.pipe(autoprefixer('last 15 versions', '> 1%')) // * 3 * //
.pipe(gulp.dest(sassDest)) // * 4 * //
.pipe(rename({suffix: '.min'})) // * 5 * //
.pipe(sass({outputStyle: 'compressed'})) // * 6 * //
.pipe(gulp.dest(sassDest)); // * 7 * //
});
// TAREA JEKYLL-BUILD (primero ejecuta la terea sass)
// * 1 * // ejecuta el comando jekyll con el subcomando build
gulp.task('jekyll-build', ['sass'], () => {
// CONFIGURACION LOCAL
// baseurl & url (vacio)
const jekyll = child.spawn('jekyll', ['build']); // * 1 * //
});
// TAREA JEKYLL (primero ejecuta la terea sass)
// * 1 * // ejecuta el comando jekyll con el subcomando build
// * 2 * // añade la opción --watch (vigila cambios)
// * 3 * // añade la opción --incremental (compila solo los archivos modificados)
gulp.task('jekyll', ['sass'], () => {
// CONFIGURACION LOCAL
// baseurl & url (vacio)
const jekyll = child.spawn('jekyll', ['build', // * 1 * //
'--watch', // * 2 * //
'--incremental' // * 3 * //
]);
// CONFIGURACION DE PROD. + CONFIGURACION LOCAL
// baseurl & url (definido)
// añadir _config-dev.yml con baseurl & url (vacio)
// * 4 * // añade la opción --config (define archivo de configuración)
// * 5 * // archivos de configuración (cada archivo modofica las definiciones del anterior)
/*
const jekyll = child.spawn('jekyll', ['build',
'--watch',
'--incremental',
'--config', // * 4 * //
'_config.yml,_config-dev.yml' // * 5 * //
]);
*/
const jekyllLogger = (buffer) => {
buffer.toString()
.split(/\n/)
.forEach((message) => gutil.log('Jekyll: ' + message));
};
jekyll.stdout.on('data', jekyllLogger);
jekyll.stderr.on('data', jekyllLogger);
});
// TAREA SERVE (primero ejecuta la tarea jekyll)
// * 1 * // inicializa browser-sync
// * 2 * // ruta donde vigila los archivos para auto-refrescar el navegador
// * 3 * // puerto para el servidor local
// * 4 * // ruta para montar el servidor local
// * 5 * // vigila los cambios y ejecuta la tarea sass
gulp.task('serve', ['jekyll'], () => {
browserSync.init({ // * 1 * //
files: [siteRoot + '/**'], // * 2 * //
port: 4000, // * 3 * //
server: {
baseDir: siteRoot // * 4 * //
}
});
gulp.watch(('_sass/**'), ['sass']); // * 5 * //
});
// TAREA DEFAULT (inicia la tarea serve al ejecutar el comando gulp)
gulp.task('default', ['serve']);
/* FORK: http://aaronlasseigne.com/2016/02/03/using-gulp-with-jekyll/ */
/* TAREA SASS https://gist.github.com/BCasal/1eb6747760abe62472aa */
// DEPENDENCIAS
const child = require('child_process');
const browserSync = require('browser-sync').create();
const gulp = require('gulp');
const gutil = require('gulp-util');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
// RUTAS
const siteRoot = '_site';
const sassDest = siteRoot + '/assets/css/';
const sassSrc = sassDest + 'style.css';
// TAREA JEKYLL
// * 1 * // ejecuta el comando jekyll con el subcomando build
// * 2 * // añade la opción --watch (vigila cambios)
// * 3 * // añade la opción --incremental (compila solo los archivos modificados)
gulp.task('jekyll', () => {
// CONFIGURACION LOCAL
// baseurl & url (vacio)
const jekyll = child.spawn('jekyll', ['build', // * 1 * //
'--watch', // * 2 * //
'--incremental' // * 3 * //
]);
// CONFIGURACION DE PROD. + CONFIGURACION LOCAL
// baseurl & url (definido)
// añadir _config-dev.yml con baseurl & url (vacio)
/*
// * 4 * // añade la opción --config (define archivo de configuración)
// * 5 * // archivos de configuración (cada archivo modofica las definiciones del anterior)
const jekyll = child.spawn('jekyll', ['build',
'--watch',
'--incremental',
'--config', // * 4 * //
'_config.yml,_config-dev.yml' // * 5 * //
]);
*/
const jekyllLogger = (buffer) => {
buffer.toString()
.split(/\n/)
.forEach((message) => gutil.log('Jekyll: ' + message));
};
jekyll.stdout.on('data', jekyllLogger);
jekyll.stderr.on('data', jekyllLogger);
});
// TAREA SERVE (primero ejecuta la tarea jekyll)
// * 1 * // inicializa browser-sync
// * 2 * // ruta donde vigila los archivos para auto-refrescar el navegador
// * 3 * // puerto para el servidor local
// * 4 * // ruta para montar el servidor local
gulp.task('serve', ['jekyll'], () => {
browserSync.init({ // * 1 * //
files: [siteRoot + '/**'], // * 2 * //
port: 4000, // * 3 * //
server: {
baseDir: siteRoot // * 4 * //
}
});
});
// TAREA SASS
// * 1 * // archivo de origen (compilado por jekyll)
// * 2 * // copia y renombra con prefijo .min
// * 3 * // auto-prefijos (más info https://github.com/ai/browserslist)
// * 4 * // compresión producción (minificada)
// * 5 * // destino producción
gulp.task('sass', () => {
gulp.src(sassSrc) // * 1 * //
.pipe(rename({suffix: '.min'})) // * 2 * //
.pipe(autoprefixer('last 15 versions', '> 1%')) // * 3 * //
.pipe(sass({outputStyle: 'compressed'})) // * 4 * //
.pipe(gulp.dest(sassDest)); // * 5 * //
});
// TAREA DEFAULT (inicia la tarea serve al ejecutar el comando gulp)
gulp.task('default', ['serve']);
{
"name": "jekyll_gulp",
"version": "0.0.1",
"description": "Jekyll Scaffold + Gulp",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "BCasal",
"license": "MIT",
"devDependencies": {
"browser-sync": "^2.13.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.1",
"gulp-util": "^3.0.7"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment