119 lines
2.7 KiB
Markdown
119 lines
2.7 KiB
Markdown
|
---
|
||
|
|
title: Grunt
|
||
|
|
---
|
||
|
|
## Grunt
|
||
|
|
|
||
|
|
`Grunt` is a JavaScript Task Runner you can use to automate repetitive tasks.
|
||
|
|
|
||
|
|
### Why Use Grunt?
|
||
|
|
|
||
|
|
There are many repetitive tasks in web development. For example: compiling, minifying, and copying files. Doing these tasks manually takes a lot of effort and time.
|
||
|
|
|
||
|
|
You will make your job easier with Grunt. You only need to configure the tasks through a <a href='https://gruntjs.com/sample-gruntfile' target='_blank' rel='nofollow'>Gruntfile</a>.
|
||
|
|
|
||
|
|
### Getting Started
|
||
|
|
|
||
|
|
1. Install <a href='https://www.npmjs.org/' target='_blank' rel='nofollow'>npm</a>.
|
||
|
|
2. Install Grunt's command line interface (CLI) globally with `npm install -g grunt-cli`.
|
||
|
|
3. List Grunt and the Grunt plugins as devDependencies in a `package.json` file.
|
||
|
|
4. Install Grunt and the Grunt plugins with `npm i`.
|
||
|
|
5. Configure tasks in a `Gruntfile.js` file.
|
||
|
|
6. Run Grunt with `grunt`.
|
||
|
|
|
||
|
|
### Example
|
||
|
|
|
||
|
|
Below is an example of a `package.json` and `Gruntfile.js` to do the following tasks:
|
||
|
|
|
||
|
|
1. Minify HTML files.
|
||
|
|
2. Add vendor prefixes and minify CSS file.
|
||
|
|
3. Concatenate and minify JavaScript files.
|
||
|
|
4. Minify images.
|
||
|
|
|
||
|
|
#### package.json
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"name": "project-name",
|
||
|
|
"version": "0.1.0",
|
||
|
|
"devDependencies": {
|
||
|
|
"grunt": "latest",
|
||
|
|
"grunt-contrib-htmlmin": "latest",
|
||
|
|
"grunt-postcss": "latest",
|
||
|
|
"autoprefixer": "latest",
|
||
|
|
"cssnano": "latest",
|
||
|
|
"grunt-contrib-uglify": "latest",
|
||
|
|
"grunt-contrib-imagemin": "latest",
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### Gruntfile.js
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
module.exports = function(grunt) {
|
||
|
|
|
||
|
|
grunt.initConfig({
|
||
|
|
htmlmin: {
|
||
|
|
options: {
|
||
|
|
removeComments: true,
|
||
|
|
collapseWhitespace: true
|
||
|
|
},
|
||
|
|
html: {
|
||
|
|
files: [{
|
||
|
|
expand: true,
|
||
|
|
cwd: "src/",
|
||
|
|
src: "**/*.html",
|
||
|
|
dest: "dest/"
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
postcss: {
|
||
|
|
options: {
|
||
|
|
processors: [
|
||
|
|
require("autoprefixer")(),
|
||
|
|
require("cssnano")()
|
||
|
|
]
|
||
|
|
},
|
||
|
|
css: {
|
||
|
|
src: "dest/css/*.css"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
uglify: {
|
||
|
|
js: {
|
||
|
|
files: {
|
||
|
|
"dest/js/main.js": "src/js/*.js"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
imagemin: {
|
||
|
|
img: {
|
||
|
|
options: {
|
||
|
|
optimizationLevel: 5,
|
||
|
|
quality: 75
|
||
|
|
},
|
||
|
|
files: [{
|
||
|
|
expand: true,
|
||
|
|
cwd: "src/img/",
|
||
|
|
src: "**",
|
||
|
|
dest: "dest/img/"
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
grunt.loadNpmTasks("grunt-contrib-htmlmin");
|
||
|
|
grunt.loadNpmTasks("grunt-postcss");
|
||
|
|
grunt.loadNpmTasks("grunt-contrib-uglify");
|
||
|
|
grunt.loadNpmTasks("grunt-contrib-imagemin");
|
||
|
|
|
||
|
|
grunt.registerTask("default", ["htmlmin", "postcss", "uglify, imagemin"]);
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
|
||
|
|
Grunt documentation: <a href='https://gruntjs.com/getting-started' target='_blank' rel='nofollow'>Getting Started</a>
|