Created
March 31, 2018 10:53
-
-
Save UlisesGascon/5f32b686cc43037adbf5c0ddf33f55d5 to your computer and use it in GitHub Desktop.
Grunt vs Gulp using weapp generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Generated on 2018-03-31 using | |
// generator-webapp 1.1.2 | |
'use strict'; | |
// # Globbing | |
// for performance reasons we're only matching one level down: | |
// 'test/spec/{,*/}*.js' | |
// If you want to recursively match all subfolders, use: | |
// 'test/spec/**/*.js' | |
module.exports = function (grunt) { | |
// Time how long tasks take. Can help when optimizing build times | |
require('time-grunt')(grunt); | |
// Automatically load required grunt tasks | |
require('jit-grunt')(grunt, { | |
useminPrepare: 'grunt-usemin' | |
}); | |
// Configurable paths | |
var config = { | |
app: 'app', | |
dist: 'dist' | |
}; | |
// Define the configuration for all the tasks | |
grunt.initConfig({ | |
// Project settings | |
config: config, | |
// Watches files for changes and runs tasks based on the changed files | |
watch: { | |
bower: { | |
files: ['bower.json'], | |
tasks: ['wiredep'] | |
}, | |
babel: { | |
files: ['<%= config.app %>/scripts/{,*/}*.js'], | |
tasks: ['babel:dist'] | |
}, | |
babelTest: { | |
files: ['test/spec/{,*/}*.js'], | |
tasks: ['babel:test', 'test:watch'] | |
}, | |
gruntfile: { | |
files: ['Gruntfile.js'] | |
}, | |
sass: { | |
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'], | |
tasks: ['sass', 'postcss'] | |
}, | |
styles: { | |
files: ['<%= config.app %>/styles/{,*/}*.css'], | |
tasks: ['newer:copy:styles', 'postcss'] | |
} | |
}, | |
browserSync: { | |
options: { | |
notify: false, | |
background: true, | |
watchOptions: { | |
ignored: '' | |
} | |
}, | |
livereload: { | |
options: { | |
files: [ | |
'<%= config.app %>/{,*/}*.html', | |
'.tmp/styles/{,*/}*.css', | |
'<%= config.app %>/images/{,*/}*', | |
'.tmp/scripts/{,*/}*.js' | |
], | |
port: 9000, | |
server: { | |
baseDir: ['.tmp', config.app], | |
routes: { | |
'/bower_components': './bower_components' | |
} | |
} | |
} | |
}, | |
test: { | |
options: { | |
port: 9001, | |
open: false, | |
logLevel: 'silent', | |
host: 'localhost', | |
server: { | |
baseDir: ['.tmp', './test', config.app], | |
routes: { | |
'/bower_components': './bower_components' | |
} | |
} | |
} | |
}, | |
dist: { | |
options: { | |
background: false, | |
server: '<%= config.dist %>' | |
} | |
} | |
}, | |
// Empties folders to start fresh | |
clean: { | |
dist: { | |
files: [{ | |
dot: true, | |
src: [ | |
'.tmp', | |
'<%= config.dist %>/*', | |
'!<%= config.dist %>/.git*' | |
] | |
}] | |
}, | |
server: '.tmp' | |
}, | |
// Make sure code styles are up to par and there are no obvious mistakes | |
eslint: { | |
target: [ | |
'Gruntfile.js', | |
'<%= config.app %>/scripts/{,*/}*.js', | |
'!<%= config.app %>/scripts/vendor/*', | |
'test/spec/{,*/}*.js' | |
] | |
}, | |
// Mocha testing framework configuration options | |
mocha: { | |
all: { | |
options: { | |
run: true, | |
urls: ['http://<%= browserSync.test.options.host %>:<%= browserSync.test.options.port %>/index.html'] | |
} | |
} | |
}, | |
// Compiles ES6 with Babel | |
babel: { | |
options: { | |
sourceMap: true, | |
presets: ['es2015'] | |
}, | |
dist: { | |
files: [{ | |
expand: true, | |
cwd: '<%= config.app %>/scripts', | |
src: '{,*/}*.js', | |
dest: '.tmp/scripts', | |
ext: '.js' | |
}] | |
}, | |
test: { | |
files: [{ | |
expand: true, | |
cwd: 'test/spec', | |
src: '{,*/}*.js', | |
dest: '.tmp/spec', | |
ext: '.js' | |
}] | |
} | |
}, | |
// Compiles Sass to CSS and generates necessary files if requested | |
sass: { | |
options: { | |
sourceMap: true, | |
sourceMapEmbed: true, | |
sourceMapContents: true, | |
includePaths: ['.'] | |
}, | |
dist: { | |
files: [{ | |
expand: true, | |
cwd: '<%= config.app %>/styles', | |
src: ['*.{scss,sass}'], | |
dest: '.tmp/styles', | |
ext: '.css' | |
}] | |
} | |
}, | |
postcss: { | |
options: { | |
map: true, | |
processors: [ | |
// Add vendor prefixed styles | |
require('autoprefixer')({ | |
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'] | |
}) | |
] | |
}, | |
dist: { | |
files: [{ | |
expand: true, | |
cwd: '.tmp/styles/', | |
src: '{,*/}*.css', | |
dest: '.tmp/styles/' | |
}] | |
} | |
}, | |
// Automatically inject Bower components into the HTML file | |
wiredep: { | |
app: { | |
src: ['<%= config.app %>/index.html'], | |
exclude: ['bootstrap.js'], | |
ignorePath: /^(\.\.\/)*\.\./ | |
}, | |
sass: { | |
src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'], | |
ignorePath: /^(\.\.\/)+/ | |
} | |
}, | |
// Renames files for browser caching purposes | |
filerev: { | |
dist: { | |
src: [ | |
'<%= config.dist %>/scripts/{,*/}*.js', | |
'<%= config.dist %>/styles/{,*/}*.css', | |
'<%= config.dist %>/images/{,*/}*.*', | |
'<%= config.dist %>/fonts/{,*/}*.*', | |
'<%= config.dist %>/*.{ico,png}' | |
] | |
} | |
}, | |
// Reads HTML for usemin blocks to enable smart builds that automatically | |
// concat, minify and revision files. Creates configurations in memory so | |
// additional tasks can operate on them | |
useminPrepare: { | |
options: { | |
dest: '<%= config.dist %>' | |
}, | |
html: '<%= config.app %>/index.html' | |
}, | |
// Performs rewrites based on rev and the useminPrepare configuration | |
usemin: { | |
options: { | |
assetsDirs: [ | |
'<%= config.dist %>', | |
'<%= config.dist %>/images', | |
'<%= config.dist %>/styles' | |
] | |
}, | |
html: ['<%= config.dist %>/{,*/}*.html'], | |
css: ['<%= config.dist %>/styles/{,*/}*.css'] | |
}, | |
// The following *-min tasks produce minified files in the dist folder | |
imagemin: { | |
dist: { | |
files: [{ | |
expand: true, | |
cwd: '<%= config.app %>/images', | |
src: '{,*/}*.{gif,jpeg,jpg,png}', | |
dest: '<%= config.dist %>/images' | |
},{ | |
expand: true, | |
cwd: '<%= config.app %>', | |
src: '*.{ico,png}', | |
dest: '<%= config.dist %>' | |
}] | |
} | |
}, | |
svgmin: { | |
dist: { | |
files: [{ | |
expand: true, | |
cwd: '<%= config.app %>/images', | |
src: '{,*/}*.svg', | |
dest: '<%= config.dist %>/images' | |
}] | |
} | |
}, | |
htmlmin: { | |
dist: { | |
options: { | |
collapseBooleanAttributes: true, | |
collapseWhitespace: true, | |
conservativeCollapse: true, | |
removeAttributeQuotes: true, | |
removeCommentsFromCDATA: true, | |
removeEmptyAttributes: true, | |
removeOptionalTags: true, | |
// true would impact styles with attribute selectors | |
removeRedundantAttributes: false, | |
useShortDoctype: true | |
}, | |
files: [{ | |
expand: true, | |
cwd: '<%= config.dist %>', | |
src: '{,*/}*.html', | |
dest: '<%= config.dist %>' | |
}] | |
} | |
}, | |
// By default, your `index.html`'s <!-- Usemin block --> will take care | |
// of minification. These next options are pre-configured if you do not | |
// wish to use the Usemin blocks. | |
// cssmin: { | |
// dist: { | |
// files: { | |
// '<%= config.dist %>/styles/main.css': [ | |
// '.tmp/styles/{,*/}*.css', | |
// '<%= config.app %>/styles/{,*/}*.css' | |
// ] | |
// } | |
// } | |
// }, | |
// uglify: { | |
// dist: { | |
// files: { | |
// '<%= config.dist %>/scripts/scripts.js': [ | |
// '<%= config.dist %>/scripts/scripts.js' | |
// ] | |
// } | |
// } | |
// }, | |
// concat: { | |
// dist: {} | |
// }, | |
// Copies remaining files to places other tasks can use | |
copy: { | |
dist: { | |
files: [{ | |
expand: true, | |
dot: true, | |
cwd: '<%= config.app %>', | |
dest: '<%= config.dist %>', | |
src: [ | |
'*.txt', | |
'images/{,*/}*.webp', | |
'{,*/}*.html', | |
'fonts/{,*/}*.*' | |
] | |
}, { | |
expand: true, | |
dot: true, | |
cwd: '.', | |
src: 'bower_components/bootstrap-sass/assets/fonts/bootstrap/*', | |
dest: '<%= config.dist %>' | |
}] | |
} | |
}, | |
// Generates a custom Modernizr build that includes only the tests you | |
// reference in your app | |
modernizr: { | |
dist: { | |
devFile: 'bower_components/modernizr/modernizr.js', | |
outputFile: '<%= config.dist %>/scripts/vendor/modernizr.js', | |
files: { | |
src: [ | |
'<%= config.dist %>/scripts/{,*/}*.js', | |
'<%= config.dist %>/styles/{,*/}*.css', | |
'!<%= config.dist %>/scripts/vendor/*' | |
] | |
}, | |
uglify: true | |
} | |
}, | |
// Run some tasks in parallel to speed up build process | |
concurrent: { | |
server: [ | |
'babel:dist', | |
'sass' | |
], | |
test: [ | |
'babel' | |
], | |
dist: [ | |
'babel', | |
'sass', | |
'imagemin', | |
'svgmin' | |
] | |
} | |
}); | |
grunt.registerTask('serve', 'start the server and preview your app', function (target) { | |
if (target === 'dist') { | |
return grunt.task.run(['build', 'browserSync:dist']); | |
} | |
grunt.task.run([ | |
'clean:server', | |
'wiredep', | |
'concurrent:server', | |
'postcss', | |
'browserSync:livereload', | |
'watch' | |
]); | |
}); | |
grunt.registerTask('server', function (target) { | |
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); | |
grunt.task.run([target ? ('serve:' + target) : 'serve']); | |
}); | |
grunt.registerTask('test', function (target) { | |
if (target !== 'watch') { | |
grunt.task.run([ | |
'clean:server', | |
'concurrent:test', | |
'postcss' | |
]); | |
} | |
grunt.task.run([ | |
'browserSync:test', | |
'mocha' | |
]); | |
}); | |
grunt.registerTask('build', [ | |
'clean:dist', | |
'wiredep', | |
'useminPrepare', | |
'concurrent:dist', | |
'postcss', | |
'concat', | |
'cssmin', | |
'uglify', | |
'copy:dist', | |
'modernizr', | |
'filerev', | |
'usemin', | |
'htmlmin' | |
]); | |
grunt.registerTask('default', [ | |
'newer:eslint', | |
'test', | |
'build' | |
]); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// generated on 2018-03-31 using generator-webapp 3.0.1 | |
const gulp = require('gulp'); | |
const gulpLoadPlugins = require('gulp-load-plugins'); | |
const browserSync = require('browser-sync').create(); | |
const del = require('del'); | |
const wiredep = require('wiredep').stream; | |
const runSequence = require('run-sequence'); | |
const $ = gulpLoadPlugins(); | |
const reload = browserSync.reload; | |
let dev = true; | |
gulp.task('styles', () => { | |
return gulp.src('app/styles/*.scss') | |
.pipe($.plumber()) | |
.pipe($.if(dev, $.sourcemaps.init())) | |
.pipe($.sass.sync({ | |
outputStyle: 'expanded', | |
precision: 10, | |
includePaths: ['.'] | |
}).on('error', $.sass.logError)) | |
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']})) | |
.pipe($.if(dev, $.sourcemaps.write())) | |
.pipe(gulp.dest('.tmp/styles')) | |
.pipe(reload({stream: true})); | |
}); | |
gulp.task('scripts', () => { | |
return gulp.src('app/scripts/**/*.js') | |
.pipe($.plumber()) | |
.pipe($.if(dev, $.sourcemaps.init())) | |
.pipe($.babel()) | |
.pipe($.if(dev, $.sourcemaps.write('.'))) | |
.pipe(gulp.dest('.tmp/scripts')) | |
.pipe(reload({stream: true})); | |
}); | |
function lint(files) { | |
return gulp.src(files) | |
.pipe($.eslint({ fix: true })) | |
.pipe(reload({stream: true, once: true})) | |
.pipe($.eslint.format()) | |
.pipe($.if(!browserSync.active, $.eslint.failAfterError())); | |
} | |
gulp.task('lint', () => { | |
return lint('app/scripts/**/*.js') | |
.pipe(gulp.dest('app/scripts')); | |
}); | |
gulp.task('lint:test', () => { | |
return lint('test/spec/**/*.js') | |
.pipe(gulp.dest('test/spec')); | |
}); | |
gulp.task('html', ['styles', 'scripts'], () => { | |
return gulp.src('app/*.html') | |
.pipe($.useref({searchPath: ['.tmp', 'app', '.']})) | |
.pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}}))) | |
.pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false}))) | |
.pipe($.if(/\.html$/, $.htmlmin({ | |
collapseWhitespace: true, | |
minifyCSS: true, | |
minifyJS: {compress: {drop_console: true}}, | |
processConditionalComments: true, | |
removeComments: true, | |
removeEmptyAttributes: true, | |
removeScriptTypeAttributes: true, | |
removeStyleLinkTypeAttributes: true | |
}))) | |
.pipe(gulp.dest('dist')); | |
}); | |
gulp.task('images', () => { | |
return gulp.src('app/images/**/*') | |
.pipe($.cache($.imagemin())) | |
.pipe(gulp.dest('dist/images')); | |
}); | |
gulp.task('fonts', () => { | |
return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {}) | |
.concat('app/fonts/**/*')) | |
.pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts'))); | |
}); | |
gulp.task('extras', () => { | |
return gulp.src([ | |
'app/*', | |
'!app/*.html' | |
], { | |
dot: true | |
}).pipe(gulp.dest('dist')); | |
}); | |
gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); | |
gulp.task('serve', () => { | |
runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => { | |
browserSync.init({ | |
notify: false, | |
port: 9000, | |
server: { | |
baseDir: ['.tmp', 'app'], | |
routes: { | |
'/bower_components': 'bower_components' | |
} | |
} | |
}); | |
gulp.watch([ | |
'app/*.html', | |
'app/images/**/*', | |
'.tmp/fonts/**/*' | |
]).on('change', reload); | |
gulp.watch('app/styles/**/*.scss', ['styles']); | |
gulp.watch('app/scripts/**/*.js', ['scripts']); | |
gulp.watch('app/fonts/**/*', ['fonts']); | |
gulp.watch('bower.json', ['wiredep', 'fonts']); | |
}); | |
}); | |
gulp.task('serve:dist', ['default'], () => { | |
browserSync.init({ | |
notify: false, | |
port: 9000, | |
server: { | |
baseDir: ['dist'] | |
} | |
}); | |
}); | |
gulp.task('serve:test', ['scripts'], () => { | |
browserSync.init({ | |
notify: false, | |
port: 9000, | |
ui: false, | |
server: { | |
baseDir: 'test', | |
routes: { | |
'/scripts': '.tmp/scripts', | |
'/bower_components': 'bower_components' | |
} | |
} | |
}); | |
gulp.watch('app/scripts/**/*.js', ['scripts']); | |
gulp.watch(['test/spec/**/*.js', 'test/index.html']).on('change', reload); | |
gulp.watch('test/spec/**/*.js', ['lint:test']); | |
}); | |
// inject bower components | |
gulp.task('wiredep', () => { | |
gulp.src('app/styles/*.scss') | |
.pipe($.filter(file => file.stat && file.stat.size)) | |
.pipe(wiredep({ | |
ignorePath: /^(\.\.\/)+/ | |
})) | |
.pipe(gulp.dest('app/styles')); | |
gulp.src('app/*.html') | |
.pipe(wiredep({ | |
exclude: ['bootstrap-sass'], | |
ignorePath: /^(\.\.\/)*\.\./ | |
})) | |
.pipe(gulp.dest('app')); | |
}); | |
gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => { | |
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); | |
}); | |
gulp.task('default', () => { | |
return new Promise(resolve => { | |
dev = false; | |
runSequence(['clean', 'wiredep'], 'build', resolve); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment