Example of grunt file
For a long time, I use grunt in my work to automate several processes, such as compile SASS to CSS, merge different images into a sprite, make CSS styles universal for all browsers. In fact, for different projects, I use both grunt and gulp. The reason is simple. Often, I am hired by agencies whose teams have their own standards and tools. In this short article, we will not say which is better. I just want to share the file that I use, maybe it will be useful to someone. I will not describe each line step by step, the purpose of this article is to make a cheat sheet, not a manual.
A package.json file is the best way to manage locally installed npm
packages.
- Lists the packages that your project depends on
- Allows you to specify the versions of a package that your project can use using semantic versioning rules
- Makes your build reproducible and therefore much easier to share with other developers
A Gruntfile.js file is used to configure or define tasks and load Grunt plugins.
An easy way to use this.
- Put both files, for example, in the directory of your theme
- Install project dependencies with
npm install
. - Run Grunt with
grunt
.
More detailed documentation on the official website.
Here is also a similar article with an example for gulp.
{ "name": "EasyDrupal", "version": "1.0.0", "author": "Ruslan P", "private": true, "devDependencies": { "autoprefixer": "^7.1.6", "grunt": "^1.0.1", "grunt-contrib-imagemin": "^1.0.1", "grunt-contrib-sass": "^1.0.0", "grunt-contrib-watch": "^1.0.0", "grunt-notify": "^0.4.5", "grunt-postcss": "^0.9.0", "grunt-spritesmith": "^6.3.1", "jit-grunt": "^0.10.0", "time-grunt": "^1.4.0" } }
module.exports = function (grunt) { 'use strict'; // Time how long tasks take. Can help when optimizing build times. require('time-grunt')(grunt); // Automatically load required grunt tasks. require('jit-grunt')(grunt, { useminPrepare: 'grunt-usemin', sprite: 'grunt-spritesmith' }); // Configurable. var config = {}; // Project configuration. grunt.initConfig({ // Config. config: config, // Create sprite. sprite: { development: { src: 'images/sprite-src/*.png', dest: 'images/sprite.png', destCss: 'scss/_sprite.scss', padding: 2 } }, // Optimize images. imagemin: { dynamic: { files: [{ expand: true, cwd: 'images/', src: ['**/*.{png,jpg,gif}'], dest: 'images/' }] } }, // Compiles Sass to CSS and generates necessary files if requested. sass: { development: { options: { style: 'expanded', unixNewlines: true, sourcemap: 'file' }, files: [{ expand: true, cwd: 'scss', src: ['*.scss'], dest: 'css', ext: '.css' }] } }, postcss: { options: { map: { inline: false }, processors: [ require('autoprefixer')({browsers: 'last 3 versions'}) ] }, dist: { src: ['css/landing-page.css', 'css/style.css'] } }, // Watches files for changes and runs tasks based on the changed files. watch: { sprite: { files: ['images/sprite-src/*.png'], tasks: ['sprite'] }, sass: { files: ['scss/*.scss'], tasks: ['sass:development'] }, postcss: { files: ['css/*.css'], tasks: ['postcss'] }, gruntfile: { files: ['Gruntfile.js'] }, js: { files: ['js/*.js'], options: { livereload: true } } } }); // Force load tasks which can not be loaded by 'jit-grunt' plugin. grunt.loadNpmTasks('grunt-notify'); grunt.loadNpmTasks('grunt-postcss'); grunt.registerTask('default', ['watch']); };