Skip to content

Instantly share code, notes, and snippets.

@richard-to
Created July 19, 2014 09:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richard-to/368a26fbfa8dc25c822d to your computer and use it in GitHub Desktop.
Save richard-to/368a26fbfa8dc25c822d to your computer and use it in GitHub Desktop.
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']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment