为hakyll设置Gulp, Foundation和Rollup

Hakyll has its own built-in js, css, and image pre-processing, however, I can’t imagine it being as robust as the tools provided by the nodejs community. In this, I decided to bypass Hakyll’s compressCssCompiler and copyFileCompiler and going with foundation, gulp, and rollup:

First, I’m going to need gulp to manage all my build tasks:

npm install --save-dev gulp

I’m going to need foundation for styling and I’m going to want to work directly with the SASS files, so I’ll use gulp-sass for compilation

npm install --save-dev foundation-sites
npm install --save-dev gulp-sass

I’m also going to want to be able to write js files using es6 module syntax(http://www.2ality.com/2015/07/favorite-es6-features.html). So, I’ll need babel for compiling down to es5, and rollup for bundling my js files:

npm install --save-dev rollup
npm install --save-dev gulp-rollup

And, while I’m at it, might as well go all the way and install babel so that I could write all my code using es6 (aka es2015) syntax:

npm install --save-dev rollup-plugin-babel

Then, I created a gulpfile and two primary tasks for managig my js build:

1. A buil-js task. Note that it processes the *.js files from the /js folder and outputs the results directly into the /_sites folder.

gulp.task('build-js', function(){
 var babelOptions = {};
 var rollupOptions = {
  plugins: [
   babel(babelOptions)
  ]
 };

 gulp.src('js/main.js')
  .pipe(sourcemaps.init())
   .pipe(rollup(rollupOptions))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('_site/js'));
});

2. A build-css task.

gulp.task('build-css', function () {
 var options = {
  includePaths: ['node_modules/foundation-sites/scss', 'scss']
 };

 return gulp.src('./scss/**/*.scss')
  .pipe(sourcemaps.init())
   .pipe(sass(options).on('error', sass.logError))
   .pipe(minifyCss())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('_site/css'));
});

To run both tasks at once, I can created a build task:

gulp.task('build', ['build-js', 'build-sass']);

I think that about covers it.

from http://gabrielcastillo.me/posts/2016-01-10-trying-out-haskell.html

1. Setup a site using gulp
2. Setup a site using rollup
3. Setup a site using babel