Skip to content

Instantly share code, notes, and snippets.

@noameppel

noameppel/Gruntfile.js

Created March 3, 2015 16:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save noameppel/b27632fe974cc65b7435 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save noameppel/b27632fe974cc65b7435 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Gruntfile.js
Raw
Gruntfile.js
module.exports = function(grunt) {
// Load multiple grunt tasks using globbing patterns
// This module will read the dependencies/devDependencies/peerDependencies in
// the package.json and load grunt tasks that match the provided patterns.
// Load all grunt tasks:
require('load-grunt-tasks')(grunt);
var PathConfig = require('./grunt-settings.js');
// tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
config: PathConfig,
//clean files
clean: {
options: { force: true },
temp: {
src: ["<%= config.cssDir %>**/*.map", "<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css.map", "./jpgtmp.jpg"]
}
},
// autoprefixer
autoprefixer: {
options: {
browsers: ['last 4 version', 'Android 4', 'ie 8', 'ie 9']
},
multiple_files: {
options: {
map: true
},
expand: true,
flatten: true,
src: ['<%= config.cssDir %>*.css', '<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css']
},
dist: {
src: ['<%= config.cssDir %>*.css',
'<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css',
'!<%= config.cssDir %>bootstrap.css',
'!<%= config.cssDir %>bootstrap.min.css',
'!<%= config.cssDir %>ie.css',
'!<%= config.cssDir %>ie8.css'
]
},
},
//sass
sass: {
options: PathConfig.hasBower,
dev: {
options: {
sourceMap: true,
style: 'expanded'
},
files: [
{
expand: true,
cwd: '<%= config.sassDir %>',
src: ['**/*.scss', '!<%= config.sassMainFileName %>.scss'],
dest: '<%= config.cssDir %>',
ext: '.css'
},
{src: '<%= config.sassDir %><%= config.sassMainFileName %>.scss', dest: '<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css'}
]
},
dist: {
options: {
sourceMap: false,
style: 'expanded'
},
files: [
{
expand: true,
cwd: '<%= config.sassDir %>',
src: ['**/*.scss', '!<%= config.sassMainFileName %>.scss'],
dest: '<%= config.cssDir %>',
ext: '.css'
},
{src: '<%= config.sassDir %><%= config.sassMainFileName %>.scss', dest: '<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css'}
]
},
min: {
options: {
sourceMap: false,
style: 'compressed'
},
files: [
{
expand: true,
cwd: '<%= config.sassDir %>',
src: ['**/*.scss', '!<%= config.sassMainFileName %>.scss'],
dest: '<%= config.cssDir %>',
ext: '.min.css'
},
{src: '<%= config.sassDir %><%= config.sassMainFileName %>.scss', dest: '<%= config.cssMainFileDir %><%= config.cssMainFileName %>.min.css'}
]
}
},
//watcher project
watch: {
options: {
debounceDelay: 1,
// livereload: true,
},
images: {
files: ['<%= config.imgSourceDir %>**/*.*'],
tasks: ['img:jpg', 'newer:pngmin:all', 'newer:svgmin'],
options: {
spawn: false
}
},
svgSprites: {
files: ['<%= config.imgSourceDir %>svg-icons/*.*'],
tasks: ['svgstore', 'svg2string'],
options: {
spawn: false
}
},
css: {
files: ['<%= config.sassDir %>**/*.scss'],
tasks: ['sass:dev'/*, 'newer:autoprefixer:dist'*/],
options: {
spawn: false,
}
}
},
img: {
jpg: {
src: ['<%= config.imgSourceDir %>**/*.jpg'],
dest: '<%= config.imgDir %>'
},
},
svgmin: {
options: {
plugins: [
{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}
]
},
dist: {
files: [
{
expand: true,
src: ['**/*.svg'],
cwd: '<%= config.imgSourceDir %>',
dest: '<%= config.imgDir %>'
}
]
}
},
svgstore: {
options: {
prefix : 'icon-', // This will prefix each ID
svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
},
cleanup: ['fill']
},
your_target: {
files: {
'<%= config.imgDir %>svg-sprites/sprite.svg': ['<%= config.imgDir %>svg-icons/*.svg'],
},
},
},
svg2string: {
elements: {
options: {
template: '(window.SVG_SPRITES = window.SVG_SPRITES || {})["[%= filename %]"] = [%= content %];',
wrapLines: false
},
files: {
'<%= config.jsDir %>svg-sprites.js': [
// '<%= config.imgDir %>sprite.svg',
'<%= config.imgDir %>svg-sprites/sprite.svg'
]
}
}
},
// lossy image optimizing (compress png images with pngquant)
pngmin: {
all: {
options: {
ext: '.png',
force: true
},
files: [
{
expand: true,
src: ['**/*.png'],
cwd: '<%= config.imgSourceDir %>',
dest: '<%= config.imgDir %>'
}
]
},
},
//Keep multiple browsers & devices in sync when building websites.
browserSync: {
dev: {
bsFiles: {
src : ['**/*.html','<%= config.cssDir %>**/*.css', '*.css']
},
options: {
server: {
baseDir: "../",
index: "index.html",
directory: true
},
watchTask: true
}
}
},
notify: {
options: {
enabled: true,
max_js_hint_notifications: 5,
title: "WP project"
},
watch: {
options: {
title: 'Task Complete', // optional
message: 'SASS finished running', //required
}
},
},
// grunt-contrib-copy
// https://github.com/gruntjs/grunt-contrib-copy
copy: {
dist: {
files: [
{
expand: true,
dot: true,
cwd: './',
src: [
'**',
'!scss/**',
'!**/**/.svn/**',
'!css/**',
],
dest: '<%= config.distDir %>'
}
]
},
},
// Scrupulously manage file locations for bower dependencies.
// https://www.npmjs.com/package/grunt-bowercopy
bowercopy: {
options: {
// Clean will remove bower components folder after copy
clean: false
},
bower: {
options: {
// List options here
// destPrefix: 'dir'
},
files: {
// Keys are destinations (prefixed with `options.destPrefix`)
// Values are sources (prefixed with `options.srcPrefix`); One source per destination
// e.g. 'bower/chai/lib/chai.js' will be copied to 'js/headroom/libs/chai.js'
'js/jQuery.headroom.min.js': 'headroom.js/dist/jQuery.headroom.min.js',
'js/jasny-bootstrap.min.js': 'jasny-bootstrap/dist/js/jasny-bootstrap.min.js',
'css/jasny-bootstrap.min.css': 'jasny-bootstrap/dist/css/jasny-bootstrap.min.css'
}
},
},
csscomb: {
all: {
expand: true,
src: ['<%= config.cssDir %>*.css',
'<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css',
'!<%= config.cssDir %>bootstrap.css',
'!<%= config.cssDir %>ie.css',
'!<%= config.cssDir %>ie8.css'
],
ext: '.css'
},
dist: {
expand: true,
files: {
'<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css' : '<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css'
},
}
},
cmq: {
options: {
log: false
},
all: {
files: [
{
expand: true,
src: ['**/*.css', '!bootstrap.css'],
cwd: '<%= config.cssDir %>',
dest: '<%= config.cssDir %>'
}
]
},
dist: {
files: {
'<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css' : '<%= config.cssMainFileDir %><%= config.cssMainFileName %>.css'
},
}
},
'sftp-deploy': {
build: {
auth: {
host: '<%= config.sftpServer %>',
port: '<%= config.sftpPort %>',
authKey: {
"username": "<%= config.sftpLogin %>",
"password": "<%= config.sftpPas %>"
}
},
cache: 'sftpCache.json',
src: 'css',
dest: '<%= config.sftpDestination %>',
//exclusions: ['/path/to/source/folder/**/.DS_Store', '/path/to/source/folder/**/Thumbs.db', 'dist/tmp'],
serverSep: '/',
concurrency: 4,
progress: true
}
}
});
// run task
//dev
//watch
grunt.registerTask('w', ['watch']);
//browser sync
grunt.registerTask('bs', ['browserSync']);
//watch + browser sync
grunt.registerTask('dev', ['browserSync', 'bowercopy', 'watch']);
//create svg sprite
grunt.registerTask('svgsprite', ['svgmin', 'svgstore', 'svg2string']);
grunt.registerTask('default', ['dev']);
// upload to server
grunt.registerTask('sftp', ['sftp-deploy']);
//finally
//css beautiful
grunt.registerTask('cssbeauty', ['sass:dist', 'cmq:dist', 'autoprefixer:dist', 'csscomb:dist']);
//img minify
grunt.registerTask('imgmin', ['img:jpg', 'svgmin', 'pngmin:all']);
//final build
grunt.registerTask('dist', ['clean:temp', 'cssbeauty']);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment