Skip to content

Instantly share code, notes, and snippets.

@insane-dev

insane-dev/Gruntfile.js

Last active June 14, 2016 22:26
Show Gist options
  • Save insane-dev/cc03f93898332d0e559fedc3008f98a1 to your computer and use it in GitHub Desktop.
Save insane-dev/cc03f93898332d0e559fedc3008f98a1 to your computer and use it in GitHub Desktop.
Download ZIP
bower.json, package.json and perfect starter Gruntfile.js (jade(pug), scss/sass, minifiers, ulifiers, cache busting, bower, image optimization, browser live reload, file concatenating)
Raw
bower.json
{
"name": "awesome-app",
"description": "Web application",
"main": "index.html",
"authors": [
"Bogdan Fedun"
],
"license": "MIT",
"keywords": [
"delagics",
"web",
"app"
],
"moduleType": [],
"homepage": "http://delagics.com/",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "^2.2.4",
"font-awesome": "fontawesome#^4.6.3",
"bootstrap": "~3.3.6"
}
}
Raw
Gruntfile.js
// For performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// If you want to recursively match all sub-folders, use:
// 'test/spec/**/*.js'
'use strict';
module.exports = function (grunt) {
var autoprefixer = require('autoprefixer')({
browsers: [
'Chrome >= 35',
'Firefox >= 31',
'Edge >= 12',
'Explorer >= 9',
'iOS >= 8',
'Safari >= 8',
'Android 2.3',
'Android >= 4',
'Opera >= 12'
]
}),
cssnano = require('cssnano')();
grunt.initConfig({
//-----------------------------------------------------------------------------------------------IMPORT-package.json
pkg: grunt.file.readJSON('package.json'),
//-----------------------------------------------------------------------------------------------------CONFIG-OBJECT
config: {
src: {
root: 'src',
fonts: '<%= config.src.root %>/fonts/{,*/}*.{woff,woff2,ttf,eot,svg}',
html: '<%= config.src.root %>/html',
images: '<%= config.src.root %>/images/',
scripts: '<%= config.src.root %>/scripts/{,*/}*.js',
styles: '<%= config.src.root %>/styles/'
},
dist: {
root: 'dist',
fonts: '<%= config.dist.root %>/fonts',
html: '<%= config.dist.root %>/',
images: '<%= config.dist.root %>/img',
scripts: '<%= config.dist.root %>/js',
styles: '<%= config.dist.root %>/css',
assets: '<%= config.dist.root %>/assets'
}
},
//--------------------------------------------------------------------------------------------------------CLEAN-DIST
clean: {
dist: ['<%= config.dist.root %>']
},
//---------------------------------------------------------------------------------------------------------SASS/SCSS
// grunt-contrib-sass (need to be installed)
/*sass: {
dist: {
options: {
sourcemap: 'none',
style: 'compact', // nested, compact, compressed, expanded
quiet: true,
// loadPath: ['./bower_components/']
},
files: [{
expand: true,
cwd: '<%= config.src.styles %>',
src: ['{,*!/}*.{scss,sass}'],
dest: '<%= config.dist.styles %>',
ext: '.css'
}]
}
},*/
// grunt-sass (faster then grunt-contrib-sass)
sass: {
dist: {
options: {
sourceMap: false,
outputStyle: 'compact',
sourceComments: false,
},
files: [{
expand: true,
cwd: '<%= config.src.styles %>',
src: ['{,*/}*.{scss,sass}'],
dest: '<%= config.dist.styles %>',
ext: '.css'
}]
}
},
//----------------------------------------------------------------------------------------------------------POST-CSS
postcss: {
prefix: {
map: {inline: false},
options: {processors: [autoprefixer]},
src: ['<%= config.dist.styles %>/{,*!/}*.css']
},
minimize: {
options: {processors: [cssnano]},
files: [{
expand: true,
cwd: '<%= config.dist.styles %>',
src: ['{,*/}*.css'],
dest: '<%= config.dist.styles %>',
ext: '.min.css'
}]
}
},
//----------------------------------------------------------------------------------------------CONCATENATE-JS-FILES
concat: {
options: {stripBanners: false/*, separator: ';'*/},
scripts: {
src: ['<%= config.src.scripts %>'],
dest: '<%= config.dist.scripts %>/app.js'
}
},
//---------------------------------------------------------------------------------------------------------UGLIFY-JS
uglify: {
options: {sourceMap: true},
dist: {
files: [{
expand: true,
cwd: '<%= config.dist.scripts %>/',
src: ['{,*/}*.js', '!{,*/}*.min.js'],
dest: '<%= config.dist.scripts %>',
ext: '.min.js'
}]
}
},
//----------------------------------------------------------------------------------------------------------JADE/PUG
pug: {
dist: {
options: {
pretty: true,
data: {debug: false, timestamp: '<%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %>'}
},
files: [{
expand: true,
cwd: '<%= config.src.html %>',
dest: '<%= config.dist.html %>',
src: ['{,*/}*.{pug,jade,htm,html,php}', '!{,*/}/_*.{pug,jade,htm,html,php}'],
ext: '.html'
}]
}
},
//-----------------------------------------------------------------------------------------------------CACHE-BUSTING
cacheBust: {
dist: {
options: {
baseDir: '<%= config.dist.root %>',
assets: ['**'],
queryString: true
},
files: [{
expand: true,
cwd: '<%= config.dist.html %>',
src: ['index.html'],
filter: 'isFile'
}]
}
},
//----------------------------------------------------------------------------------------------------------IMAGEMIN
imagemin: {
dist: {
options: {optimizationLevel: 3, svgoPlugins: [{removeViewBox: false}]},
files: [{
expand: true,
cwd: '<%= config.src.images %>',
src: ['**/*.{jpg,jpeg,png,gif,svg}'],
dest: '<%= config.dist.images %>'
}]
}
},
//---------------------------------------------------------------------------------------------------------MODERNIZR
modernizr: {
dist: {
crawl: false,
customTests: [],
// Avoid unnecessary builds
cache: true,
// Path to the build you're using for development.
devFile: false,
dest: '<%= config.dist.scripts %>/modernizr.js',
options: [
'domPrefixes',
'prefixes',
'prefixed',
'testAllProps',
'testProp',
'testStyles',
'html5shiv',
'setClasses'
],
uglify: true,
tests: [
'cssanimations', 'csstransitions',
/*'applicationcache', 'audio', 'canvas', 'canvastext', 'geolocation', 'hashchange', 'history', 'indexeddb',
'svg', 'touchevents', 'video', 'webgl', 'websockets', 'cssanimations', 'backgroundsize', 'bgsizecover',
'boxshadow', 'csscolumns', 'ellipsis', 'cssfilters', 'flexbox', 'flexboxlegacy', 'flexboxtweener', 'flexwrap',
'fontface', 'generatedcontent', 'cssgradients', 'hsla', 'multiplebgs', 'opacity', 'cssreflections',
'cssremunit', 'rgba', 'textshadow', 'csstransforms', 'csstransforms3d', 'csstransitions', 'localstorage',
'sessionstorage', 'websqldatabase', 'svgclippaths', 'svgfilters', 'inlinesvg', 'videoautoplay', 'webworkers'*/
]
}
},
//-------------------------------------------------------------------------------------------COPY-BOWER-DEPENDENCIES
bowercopy: {
options: {
srcPrefix: 'bower_components',
destPrefix: '<%= config.dist.assets %>'
},
dist: {
files: [
{'jquery': 'jquery/dist'},
{'bootstrap': 'bootstrap/dist'},
{'font-awesome/css': 'font-awesome/css'},
{'font-awesome/fonts': 'font-awesome/fonts'}
]
},
},
//-------------------------------------------------------------------------------------------------------------WATCH
watch: {
css: {
files: '<%= config.src.styles %>/**/*.{scss,sass}',
tasks: ['sass', 'postcss'],
options: {
spawn: false,
},
},
js: {
files: '<%= config.src.scripts %>',
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
html: {
files: '<%= config.src.html %>/**/*.{pug,jade,htm,html,php}',
tasks: ['pug'],
options: {
spawn: false,
},
},
images: {
files: '<%= config.src.images %>/**/*.{jpg,jpeg,png,gif,svg}',
tasks: ['imagemin'],
options: {
spawn: false,
},
}
},
//------------------------------------------------------------------------------------------------------BROWSER-SYNC
browserSync: {
dist: {
bsFiles: {
src: [
'<%= config.dist.root %>/{,*/}*.html',
'<%= config.dist.styles %>/{,*/}*.css',
'<%= config.dist.scripts %>/{,*/}*.js',
]
},
options: {
server: {
baseDir: '<%= config.dist.root %>',
index: 'index.html',
// directory: true
},
// proxy: "example.dev",
watchTask: true,
port: 9000,
logPrefix: 'Delagics',
// Stop auto-opening the browser
open: false,
browser: ['google chrome'],
ui: false,
notify: true,
reloadOnRestart: true
}
}
}
});
//------------------------------------------------------------------------------------------------------LOAD-NPM-TASKS
// load npm tasks, these plugins provide necessary tasks.
require('load-grunt-tasks')(grunt, {
scope: 'devDependencies',
pattern: ['grunt-*']
});
//------------------------------------------------------------------------------------------------------REGISTER-TASKS
// Default task
grunt.registerTask('default', [
'clean', 'bowercopy', 'sass', 'postcss', 'concat', 'uglify', 'modernizr', 'pug', 'imagemin', 'cacheBust', 'browserSync', 'watch'
]);
};
Raw
package.json
{
"name": "awesome-app",
"version": "1.0.0",
"description": "Web application",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gist.github.com/insane-dev/cc03f93898332d0e559fedc3008f98a1"
},
"keywords": [
"delagics",
"web",
"app"
],
"author": "Bogdan Fedun",
"license": "MIT",
"homepage": "https://delagics.com",
"devDependencies": {
"autoprefixer": "^6.3.6",
"cssnano": "^3.6.2",
"grunt": "^1.0.1",
"grunt-bowercopy": "^1.2.4",
"grunt-browser-sync": "^2.2.0",
"grunt-cache-bust": "^1.3.0",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-imagemin": "^1.0.1",
"grunt-contrib-pug": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-modernizr": "^1.0.2",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^1.2.0",
"load-grunt-tasks": "^3.5.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment