Archivos "gulpfile.js" para integrar en "Jekyll"

Gulp-Files_Jekyll.markdown

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

Gulp-Sass.js

/* 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']);

Jekyll-BS.js

/* 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']);

package.json

{
  "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"
  }
  
}