richard-to
7/19/2014 - 9:30 AM

Gruntfile vs. gulpfile...

Gruntfile vs. gulpfile...

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    clean: ['js', 'css', 'fonts'],

    copy: {
      main: {
        files: [
          {
            expand: true,
            cwd: 'src/less/font-awesome/fonts',
            src: ['*.{eot,svg,ttf,woff}'],
            dest: 'fonts/'
          },
          {
            expand: true,
            cwd: 'src/less/bootstrap/fonts',
            src: ['*.{eot,svg,ttf,woff}'],
            dest: 'fonts/'
          },
          {
            expand: true,
            cwd: 'vendor/js',
            src: ['*.js'],
            dest: 'js/vendor/'
          }
        ]
      },
    },

    jshint: {
      files: {
        src: [
          'Gruntfile.js',
          'src/js/**/*.js',
        ]
      }
    },

    less: {
      development: {
        files: {
          "css/styles.css": "src/less/styles.less"
        }
      }
    },

    webpack: {
      development: {
        cache: true,
        entry: {
          TaskApp: './src/js/TaskApp.jsx',
          MentorshipApp: './src/js/MentorshipApp.jsx',
        },
        watch: true,
        keepalive: true,
        output: {
          path: './js',
          filename: '[name].js'
        },
        module: {
          loaders: [
            { test: /\.jsx$/, loader: 'jsx' },
            { test: /\.js$/, loader: 'jsx' }
          ]
      }
      },
    },

    watch: {
      less: {
        files: ['src/less/styles.less'],
        tasks: ['less']
      },
      js: {
        files: ['src/js/**/*.{jsx,js}'],
        tasks: ['webpack']
      },
    }
  });

  grunt.loadNpmTasks('grunt-webpack');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint', 'copy', 'less', 'webpack']);
  grunt.registerTask('build', ['jshint', 'clean', 'copy', 'less', 'webpack']);
};
var gulp = require('gulp');

var gutil = require("gulp-util");
var clean = require('gulp-clean');
var webpack = require('gulp-webpack');
var jshint = require('gulp-jshint');
var less = require('gulp-less');

gulp.task('copy', function() {
  gulp.src('./src/less/font-awesome/fonts/*', {base: './src/less/font-awesome/fonts'})
    .pipe(gulp.dest('./fonts/'));

  gulp.src('./src/less/bootstrap/fonts/*', {base: './src/less/bootstrap/fonts'})
    .pipe(gulp.dest('./fonts/'));

  gulp.src('./vendor/js/*', { base: './vendor/js'})
    .pipe(gulp.dest('./js/vendor/'));
});

gulp.task('styles', function () {
  return gulp.src('./src/less/styles.less')
    .pipe(less())
    .pipe(gulp.dest('./css/'));
});

gulp.task('lint', function() {
  return gulp.src(['./src/js/*.jsx', './src/js/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp.task('scripts', function(callback) {
  return gulp.src(['./src/js/*.jsx', './src/js/*.js'])
    .pipe(webpack({
      cache: true,
      entry: {
        TaskApp: './src/js/TaskApp.jsx',
        MentorshipApp: './src/js/MentorshipApp.jsx',
      },
      output: {
        filename: '[name].js'
      },
      module: {
        loaders: [
          { test: /\.jsx$/, loader: 'jsx' },
          { test: /\.js$/, loader: 'jsx' }
        ]
      }
    }))
  .pipe(gulp.dest('./js/'));
});

gulp.task('clean', function() {
  return gulp.src(['css', 'js', 'fonts', 'images'], {read: false})
    .pipe(clean());
});

gulp.task('default', function() {
  gulp.start('copy', 'styles', 'lint', 'scripts');
});

gulp.task('watch', function() {
  gulp.watch('src/less/**/*.less', ['styles']);
  gulp.watch(['src/js/**/*.js', 'src/js/**/*.jsx'], ['scripts']);
});