[Proposal] Add a gulpfile (? or other build script) that watches for changes in _source and runs jigsaw build in response

[mattstauffer]

No description provided.

[adamwathan]

Yup good idea! See if I can easily do it with just PHP.

[sixlive]

Just to get things rolling here, this is a gulpfile that I just tossed together for a project I'm starting using jigsaw.

Thoughts? What would you like to see in a 'stock' build process?

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const exec = require('child_process').exec;
const watch = require('gulp-watch');
const browserSync = require('browser-sync').create();
const Promise = require("es6-promise").Promise
const cssmin = require('gulp-cssmin');
const uglify = require('gulp-uglify');
const jshint = require('gulp-jshint');
const stylish = require('jshint-stylish');

const config = {
  jigsawSource: './source/**/*.blade.php',

  images: {
      src: './source/_assets/images/**/*.{png,gif,jpg,jpeg,svg}',
      dest: './build_local/assets/images'
  },

  fonts: {
    src: './source/_assets/fonts/**/*.{woff,ttf,eot,svg}',
    dest: './build_local/assets/fonts'
  },

  scss: {
    src: './source/_assets/sass/**/*.scss',
    dest: './build_local/assets/css'
  },

  js: {
    src: './source/_assets/js/**/*.js',
    dest: './build_local/assets/js'
  },
};

const tasks = {
  sass: () => {
    return gulp.src(config.scss.src)
      .pipe(sass().on('error', sass.logError))
      .pipe(sass({outputStyle: 'expanded'}))
      .pipe(gulp.dest(config.scss.dest));
  },

  jigsaw: () => {
    return new Promise((resolve) => {
      exec('./vendor/bin/jigsaw build', function(error, stdout, stderr) {
        console.log(stdout);

        resolve();
      });
    });
  },

  jigsawSync: () => {
    return tasks.jigsaw().then(() => {
      browserSync.reload('*.html');
    });
  },

  js: () => {
    return gulp.src(config.js.src)
      .pipe(jshint())
      .pipe(jshint.reporter(stylish))
      .pipe(gulp.dest(config.js.dest));
  },

  moveFiles: {
    images: () => {
      return gulp.src(config.images.src)
        .pipe(gulp.dest(config.images.dest));
    },

    fonts: () => {
      return gulp.src(config.fonts.src)
        .pipe(gulp.dest(config.fonts.dest));
    }
  },

  compile: () => {
    tasks.jigsaw()
      .then(() => {
        tasks.sass()
          .pipe(cssmin())
          .pipe(gulp.dest(config.css.dest));

        tasks.js()
          .pipe(uglify())
          .pipe(gulp.dest(config.js.dest));

        tasks.moveFiles.images();
        tasks.moveFiles.fonts();
      });
  },

  build: () => {
    tasks.jigsaw()
      .then(() => {
        tasks.sass();
        tasks.js();
        tasks.moveFiles.images();
        tasks.moveFiles.fonts();
      });
  },

  watch: () => {
    browserSync.init({
        server: {
            baseDir: './build_local'
        }
    });

    watch(config.jigsawSource, () => {
      tasks.jigsawSync().then(() => tasks.build());
    });

    watch(config.scss.src, () => {
      tasks.sass().pipe(browserSync.stream());
    });

    watch(config.js.src, () => {
      tasks.js().pipe(browserSync.reload('*.js'));
    });

    watch(config.images.src, () => {
      tasks.moveFiles.images()
        .on('end', () => browserSync.reload());
    });

    watch(config.fonts.src, () => {
      tasks.moveFiles.fonts()
        .on('end', () => browserSync.reload());
    });
  }
};

// Sass
gulp.task('sass', () => {
  tasks.jigsaw().then(() => {
    tasks.sass();
  });
});

// Watch
gulp.task('watch', () => {
  tasks.watch();
});

// Compile only JS
gulp.task('js', () => {
  tasks.jigsaw().then(() => {
    tasks.js();
  });
});

// Compile and minify css and js
gulp.task('compile', () => {
  tasks.compile();
});

// Build assets and jigsaw
gulp.task('build', () => {
  tasks.build();
});

// Build and start watching files
gulp.task('default', ['build', 'watch']);

[adamwathan]

@sixlive that is quite the Gulpfile! I was thinking maybe we should make this use Elixir, since it's essentially static sites for Laravel users? What do you think? Lots of your Jigsaw helpers in there would still be super helpful, and we would need to add a little bit of config for the source paths and stuff to make sure we use folders that Jigsaw doesn't compile into the output.

[sixlive]

@adamwathan yeah, that totally makes sense.

[carbontwelve]

@adamwathan that looks good.

[adamwathan]

Got a start to a PR here: #10

Would love for anyone to pull it down and give it a go!

[adamwathan]

Added a default gulpfile with Elixir support in v0.4.0