Basic grunt setup

Gruntfile.js

'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
};

package.json

{
  "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"
  }
}