Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic grunt setup
'use strict';
/*******************************************************************************************************
*
* FOLDER STRUCTURE
*
* dev // files in root just move to ./prod/ and *.html files will look for grunt-includes directives
* ├── HTMLincludes // HTML snippets included by grunt-includes
* │ └── windows.html
* ├── fonts // files will simply be moved to ./prod/fonts/
* │ └── font.woff2
* ├── img // images will be minified and moved to ./prod/img/
* │ └── image.jpg
* ├── index.html
* ├── js // javascript files will be concatenated and minified by file naming order
* │ ├── 010-first-file.js
* │ ├── 020-second-file.js
* │ └── libs // files will simply be moved to ./prod/js/libs
* ├── php // files will simply be moved to ./prod/php/
* │ └── script.php
* ├── stylus // in this folder only the site.styl will be compiled into css and copied to .prod/css/
* │ ├── base
* │ │ └── normalise.styl
* │ ├── module
* │ │ └── module1.styl
* │ └── site.styl
* └── svg // all svg files will be minified and run through grunt-grunticon to ./prod/css/
* └── symbole.svg
*
*
*******************************************************************************************************/
module.exports = function(grunt) {
//dependencies
grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-includes');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-grunticon');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-copy-to');
grunt.loadNpmTasks('grunt-bumpup');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-mkdir');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
currentVersion: '<%= pkg.name %>.<%= pkg.version %>',
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// clean task
//----------------------------------------------------------------------------------------------------------------------------------------------------------
clean: {
pre: ['temp', 'prod'], //delete before running
post: ['tmp'], //delete after running
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// scaffold all directories
//----------------------------------------------------------------------------------------------------------------------------------------------------------
mkdir: {
scaffold: {
options: {
create: [
'./dev/HTMLincludes',
'./dev/fonts',
'./dev/img',
'./dev/js/libs',
'./dev/php',
'./dev/stylus/base',
'./dev/stylus/module',
'./dev/svg',
],
}
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// includes task
//----------------------------------------------------------------------------------------------------------------------------------------------------------
includes: {
files: {
cwd: 'dev/',
src: ['*.html'], // Source files
dest: 'tmp/',
options: {
flatten: true,
includePath: 'dev/HTMLincludes/',
},
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// replace task
//----------------------------------------------------------------------------------------------------------------------------------------------------------
replace: {
currentVersion: {
src: ['tmp/*.html'],
overwrite: true,
replacements: [{
from: '--currentVersion--',
to: '<%= currentVersion %>',
}],
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// stylus task
//----------------------------------------------------------------------------------------------------------------------------------------------------------
stylus: {
site: {
options: {
compress: true,
},
files: {
'prod/css/<%= currentVersion %>.min.css': 'dev/stylus/site.styl',
},
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// vendor prefixes
//----------------------------------------------------------------------------------------------------------------------------------------------------------
autoprefixer: {
Prefix: {
src: 'prod/css/<%= currentVersion %>.min.css',
dest: 'prod/css/<%= currentVersion %>.min.css',
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// JS minification
//----------------------------------------------------------------------------------------------------------------------------------------------------------
uglify: {
js: {
files: {
'prod/js/<%= currentVersion %>.min.js': ['dev/js/*.js'],
},
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// minify svgs
//----------------------------------------------------------------------------------------------------------------------------------------------------------
svgmin: {
dist: {
files: [{
expand: true,
cwd: 'dev/svg/',
src: ['*.svg'],
dest: 'temp/svg/',
}],
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// grunticon
//----------------------------------------------------------------------------------------------------------------------------------------------------------
grunticon: {
myIcons: {
files: [{
expand: true,
cwd: 'temp/svg',
src: '*.svg',
dest: 'prod/css',
}],
options: {
datasvgcss: 'symbols.data.svg.css',
datapngcss: 'symbols.data.png.css',
urlpngcss: 'symbols.fallback.css',
cssprefix: '.symbol-',
customselectors: {
// 'radio-on': ['input[type="radio"]:checked + label'],
// 'radio-off': ['.radio label', '.radio-inline label'],
// 'checkbox-on': ['input[type="checkbox"]:checked + label'],
// 'checkbox-off': ['.checkbox label', '.checkbox-inline label']
},
},
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// minify images
//----------------------------------------------------------------------------------------------------------------------------------------------------------
imagemin: {
images: {
options: {
optimizationLevel: 4,
},
files: [{
expand: true,
cwd: 'dev/img',
src: ['**/*.{png,jpg,gif}'],
dest: 'prod/img/',
}],
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// copy all files to prod
//----------------------------------------------------------------------------------------------------------------------------------------------------------
copyto: {
//js folder
JS: {
files: [{
cwd: 'dev/js/libs',
src: ['**/*'],
dest: ['prod/js/libs/']
}]
},
//fonts
Fonts: {
files: [{
cwd: 'dev/fonts',
src: ['**/*'],
dest: ['prod/fonts/'],
}],
},
//html template
Templates: {
files: [{
cwd: 'tmp',
src: ['*.html'],
dest: ['prod/'],
}],
},
//php files
PHP: {
files: [{
cwd: 'dev/php/**',
src: ['*.php'],
dest: ['prod/php/'],
}],
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// bum version
//----------------------------------------------------------------------------------------------------------------------------------------------------------
bumpup: {
files: 'package.json',
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// server
//----------------------------------------------------------------------------------------------------------------------------------------------------------
connect: {
server: {
options: {
open: false,
port: 1337,
},
},
},
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// watch for changes
//----------------------------------------------------------------------------------------------------------------------------------------------------------
watch: {
files: [
'dev/**/*',
],
tasks: ['build'],
},
});
//----------------------------------------------------------------------------------------------------------------------------------------------------------
// TASKS
//----------------------------------------------------------------------------------------------------------------------------------------------------------
grunt.registerTask('build', [
'clean:pre',
'includes',
'replace',
'stylus',
'autoprefixer',
'uglify',
'svgmin',
'grunticon',
'imagemin',
'copyto',
'clean:post'
]);
grunt.registerTask('bump', ['bumpup', 'build']); // bump up to new version
grunt.registerTask('scaffold', ['mkdir']); // create basic folder structure
grunt.registerTask('default', ['connect', 'build', 'watch']); // work
};
{
"name": "projectname",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^1.0.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-connect": "^0.6.0",
"grunt-contrib-watch": "^0.5.3",
"grunt-copy-to": "0.0.10",
"grunt-includes": "^0.4.5",
"grunt-contrib-stylus": "^0.19.0",
"grunt-svgmin": "^1.0.0",
"grunt-grunticon": "^1.2.13",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-imagemin": "^0.8.1",
"grunt-text-replace": "^0.3.12",
"grunt-bumpup": "^0.6.1",
"grunt-mkdir": "^0.1.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.