📅 最后修改于: 2020-10-25 06:20:15 🧑 作者: Mango
在本章中，让我们使用以下插件创建一个简单的Grunt文件-
安装上述所有插件，并按照以下步骤创建简单的Gruntfile.js-
步骤1-您需要创建包装函数，该函数封装您的Grunt的配置。
module.exports = function(grunt) {};
步骤2-初始化您的配置对象，如下所示-
grunt.initConfig({});
步骤3-接下来，将项目设置从package.json文件读取到pkg属性中。它使我们能够引用package.json文件中的属性值。
pkg: grunt.file.readJSON('package.json')
步骤4-接下来，您可以定义任务的配置。让我们创建第一个任务concat来串联src /文件夹中存在的所有文件，并将串联的.js文件存储在dist /文件夹下。
concat: {
options: {
// define a string to insert between files in the concatenated output
separator: ';'
},
dist: {
// files needs to be concatenated
src: ['src/**/*.js'],
// location of the concatenated output JS file
dest: 'dist/.js'
}
}
步骤5-现在，让我们创建另一个名为uglify的任务，以最小化我们的JavaScript。
uglify: {
options: {
// banner will be inserted at the top of the output which displays the date and time
banner: '/*! */\n'
},
dist: {
files: {
'dist/.min.js': ['']
}
}
}
上面的任务在dist /文件夹中创建一个文件，其中包含缩小的.js文件。的将指示uglify缩小concat任务生成的文件。
步骤6-让我们通过创建jshint任务来配置JSHint插件。
jshint: {
// define the files to lint
files: ['Gruntfile.js', 'src/**/*.js'],
// configure JSHint
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
}
}
}
上面的jshint任务接受一个文件数组，然后接受一个options对象。上面的任务将查找Gruntfile.js和src / ** / * 。js文件中的任何编码冲突。
步骤7-接下来，我们有监视任务，该任务查找任何指定文件中的更改并运行您指定的任务。
watch: {
files: [''],
tasks: ['jshint']
}
步骤8-接下来，我们必须加载已通过_npm安装的Grunt插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
步骤9-最后，我们必须定义默认任务。
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
只需在命令行上输入grunt命令即可运行默认任务。
这是您完整的Gruntfile.js-
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/.js'
}
},
uglify: {
options: {
banner: '/*! */\n'
},
dist: {
files: {
'dist/.min.js': ['']
}
}
},
jshint: {
// define the files to lint
files: ['Gruntfile.js', 'src/**/*.js'],
// configure JSHint
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
}
}
},
watch: {
files: [''],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};