Skip to content

Instantly share code, notes, and snippets.

@ethyde
Last active July 17, 2023 12:47
Show Gist options
  • Save ethyde/5eb4b553ca297f809c3e to your computer and use it in GitHub Desktop.
Save ethyde/5eb4b553ca297f809c3e to your computer and use it in GitHub Desktop.
Grunt config for PostCSS
/**
* @fileOverview Gruntfile tasks. These tasks are intended to help you when modifying the template. If you are
* just using the template, don't sweat this stuff. To use these tasks, you must install grunt, if you haven't already,
* and install the dependencies. All of this requires node.js, of course.
*
* Install grunt:
*
* npm install -g grunt-cli
*
* Then in the directory where you found this file:
*
* npm install
*
* And you are all set. See the individual tasks for details.
*
*
*/
module.exports = function( grunt ) {
'use strict';
// add timing graph after each task
require( 'time-grunt' )( grunt );
// load all task listed and speed up build process
require( 'jit-grunt' )( grunt );
// Project configuration.
grunt.initConfig( {
pkg: grunt.file.readJSON( 'package.json' ),
meta: {
day: '<%= grunt.template.today("dd-mm-yyyy") %>',
hour: '<%= grunt.template.today("HH:MM") %>',
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - <%= meta.day %> <%= meta.hour %> */\n',
dev: {
assets: 'dev',
less: '<%= meta.dev.assets %>/css',
js: '<%= meta.dev.assets %>/js',
img: '<%= meta.dev.assets %>/images',
fonts: '<%= meta.dev.assets %>/fonts'
},
prod: {
assets: 'dist',
css: '<%= meta.prod.assets %>/css',
js: '<%= meta.prod.assets %>/js',
img: '<%= meta.prod.assets %>/images',
fonts: '<%= meta.prod.assets %>/fonts'
}
},
// clean files assets in folders
clean: {
assets: [ '<%= meta.prod.assets %>' ]
},
// Copy files and folders.
copy: {
font: {
expand: true, // Enable dynamic expansion
cwd: '<%= meta.dev.fonts %>/', // Src matches are relative to this path
src: [ '*.{eot,svg,ttf,otf,woff,woff2}' ], // Actual patterns to match
dest: '<%= meta.prod.fonts %>/' // Destination path prefix
},
jsvendor: {
expand: true,
cwd: '<%= meta.dev.js %>/vendor/',
src: [ '*.js' ],
dest: '<%= meta.prod.js %>/vendor/'
}
},
// Concat JS files
concat: {
options: {
sourceMap: true
},
dev: {
src: [ '<%= meta.dev.js %>/plugin/*.js',
'<%= meta.dev.js %>/main.js'
],
dest: '<%= meta.prod.js %>/main.js'
}
},
// Grunt PostCSS task
postcss: {
options: {
map: true,
processors: [
require('postcss-import'),
require('postcss-custom-properties'),
require('postcss-calc'),
require('postcss-custom-media'),
require('postcss-media-minmax'),
require('postcss-custom-selectors'),
require('postcss-color-hex-alpha'),
require('postcss-color-function'),
require('postcss-selector-matches'),
require('postcss-selector-not'),
require('postcss-neat')({
neatMaxWidth: '100%'
}),
require('postcss-nested'),
require("css-mqpacker")(),
require('autoprefixer')({
browsers: ['> 1%', 'IE 9']
}),
]
},
dev: {
src: '<%= meta.dev.less %>/main.css',
dest: '<%= meta.prod.css %>/main.css'
},
prod: {
options: {
map: false
},
src: '<%= meta.dev.less %>/main.less',
dest: '<%= meta.prod.css %>/main.css'
}
},
// Minify PNG, JPEG and GIF images
imagemin: {
images: {
files: [ {
expand: true,
cwd: '<%= meta.dev.img %>/',
src: [ '**/*.{png,jpg,gif,svg}' ],
dest: '<%= meta.prod.img %>/'
} ]
}
},
// Minify CSS
csswring: {
options : {
removeAllComments: true
},
prod: {
src: '<%= postcss.dev.dest %>',
dest: '<%= meta.prod.css %>/main.css'
}
},
// Minify JS files
uglify: {
prod: {
src: '<%= concat.dev.src %>',
dest: '<%= meta.prod.js %>/main.js'
}
},
// Watch and livereload with help of grunt-newer
watch: {
options: {
livereload: 6325
},
js: {
files: [ '<%= meta.dev.js %>/main.js', '<%= meta.dev.js %>/plugins/*.js' ],
tasks: [ 'newer:concat:dev' ]
},
image: {
files: '<%= meta.dev.img %>/**/*.{png,jpg,gif,svg}',
tasks: [ 'newer:imagemin:images' ]
},
css: {
files: ['<%= meta.dev.css %>/main.css', '<%= meta.dev.css %>/**/layout.css', '<%= meta.dev.css %>/**/*.css'],
tasks: [ 'postcss:dev' ]
},
template: {
files: 'path/to/template/**/*.*'
}
}
} );
// This is the default task being executed if Grunt
// is called without any further parameter.
grunt.registerTask( 'default', ['clean', 'postcss:dev', 'concat', 'copy', 'imagemin' ] );
grunt.registerTask( 'prod', ['clean', 'postcss:prod', 'csswring', 'criticalcss', 'concat', 'uglify', 'copy', 'imagemin' ] );
};
{
"name": "project_name",
"version": "1.0.0",
"description": "Development setup",
"author": "Shivacom",
"private": true,
"devDependencies": {
"autoprefixer": "^6.0.3",
"csswring": "^4.0.0",
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-imagemin": "^0.9.4",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-newer": "^1.1.0",
"grunt-postcss": "^0.6.0",
"jit-grunt": "^0.9.1",
"postcss": "^5.0.8",
"postcss-calc": "^5.0.0",
"postcss-color-function": "^2.0.0",
"postcss-color-hex-alpha": "^2.0.0",
"postcss-custom-media": "^5.0.0",
"postcss-custom-properties": "^5.0.0",
"postcss-custom-selectors": "^3.0.0",
"postcss-import": "^7.0.0",
"postcss-media-minmax": "^2.1.0",
"postcss-selector-matches": "^2.0.0",
"postcss-selector-not": "^2.0.0",
"postcss-nested": "^1.0.0",
"postcss-neat": "^2.3.0",
"css-mqpacker":"^4.0.0",
"time-grunt": "^1.2.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment