BCasal/Gulp-Files_Jekyll.markdown

## Gulp-Files_Jekyll.markdown

      
    Raw
  

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

}


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


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

	}