在Javascript的 开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任务。
sudo npm install grunt-cli -g
//grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装。
npm install
//这种方法是针对已有package.json的情况
npm init
//如果想要自动生成package.json文件,可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。
npm install <module> --save-dev
//已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上–save-dev参数,该模块就会自动被加入package.json文件。
命令脚本文件Gruntfile.js
实例gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON(‘package.json‘),
// Metadata.
meta: {
basePath: ‘../‘,
srcPath: ‘../assets local/sass/‘,
deployPath: ‘../assets/‘
},
banner: ‘/*! <%= pkg.name %> - v<%= pkg.version %> - ‘ +
‘<%= grunt.template.today("yyyy-mm-dd") %>\n‘ +
‘* Copyright (c) <%= grunt.template.today("yyyy") %> ‘,
// Task configuration.
sass: {
dist: {
files: {
‘<%= meta.deployPath %>css.css‘: ‘<%= meta.srcPath %>main.scss‘
},
options: {
sourcemap: ‘true‘,
style: ‘compact‘
}
}
},
watch: {
scripts: {
files: [
‘<%= meta.srcPath %>/**/*.scss‘
],
tasks: [‘sass‘]
}
},
uglify: {
release: {//任务四:合并压缩a.js和b.js
files: {
‘../assets/js/common.min.js‘: [‘../js/a.js‘, ‘../js/b.js‘]
}
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks(‘grunt-contrib-sass‘);
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
// Default task.
grunt.registerTask(‘default‘, [‘sass‘]);
grunt.registerTask(‘default‘, [‘uglify:release‘]);
};