windows下grunt的快速入门

Posted 2020-06-27 燕子的路

1.认识grunt

　  grunt是什么：他是一套前端自动化工具，是一个基于nodejs的命令行工具。（Grunt和Grunt插件是通过npm  安装并管理的,所以首先要安装nodejs）。

     grunt能干什么：1.压缩文件  2.合并文件  3.简单的语法检查  4.监听文件变动 5.less编译

　  grunt优点：1.减轻劳动，简化工作  2.免费，没有盗版   3.插件多，而且可以自己编写插件

2.grunt安装与使用

　　第一步：添加package.json和gruntfile.js文件

　　　　package.json配置项的添加方式：

　　　　a:手动添加  (下面内容已经将基本的grunt插件写好)

　　　　{
　　　　　　"name": "grunt_test",
　　　　　　"version": "0.0.1",
　　　　　　"description": "grunt test",
　　　　　　"main": "index.js",
　　　　　　"scripts": {
　　　　　　　　"test": "echo \"Error: no test specified\" && exit 1"
　　　　　　},
　　　　　　"devDependencies": {
　　　　　　　　"grunt": "^0.4.5",
　　　　　　　　"grunt-contrib-jshint": "*",
　　　　　　　　"grunt-contrib-uglify": "*", 
　　　　　　　　"grunt-contrib-cssmin":"*", 
　　　　　　　　"grunt-contrib-imagemin":"*", 
　　　　　　　　"grunt-contrib-watch": "*", 
　　　　　　　　"grunt-contrib-concat":"*" 
　　　　　　},
　　　　　　"keywords": [
　　　　　　　　"grunt"
　　　　　　],
　　　　　　"author": "caihe",
　　　　　　"license": "ISC"
　　　　}　　

　　　　说明：

　　　　　　grunt-contrib-jshint： 检查javascript语法

　　　　　　grunt-contrib-uglify： 压缩以及合并js文件

　　　　　　grunt-contrib-cssmin：压缩以及合并css文件

　　　　　　grunt-contrib-imagemin：图像压缩模块

　　　　　　grunt-contrib-watch:监视文件变动，做出相应动作

　　　　　　grunt-contrib-concat:合并文件

　　　　然后cmd窗口中进入到当前项目的根目录输入命令行  ：npm  install

　　　　b:命令行实现：npm install grunt-contrib-jshint --save-dev等

　　　　gruntfile.js文件配置：

　　　　gruntfile.js 的作用1.读取package.json的信息  2.插件加载、注册任务、运行任务

　　　　module.exports = function(grunt){
　　　　　　//项目配置
　　　　　　grunt.initConfig({
　　　　　　　　//读取配置项
　　　　　　　　pkg:grunt.file.readJSON("package.json"),
　　　　　　　　//具体任务
　　　　　　　　uglify:{
　　　　　　　　　　options:{
　　　　　　　　　　　　//加注释
　　　　　　　　　　　　banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> \n*/"
　　　　　　　　　　},
　　　　　　　　　　build:{
　　　　　　　　　　　　//被压缩的文件的路径
　　　　　　　　　　　　src: "src/jquery-1.9.1.js",
　　　　　　　　　　　　//被压缩后的文件路径
　　　　　　　　　　　　dest:"dest/jquery-1.9.1.min.js"
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　//合并
　　　　　　　　concat:{
　　　　　　　　　　options:{
　　　　　　　　　　　　//加注释
　　　　　　　　　　　　banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> 合并的js\n*/"
　　　　　　　　　　},
　　　　　　　　　　build:{
　　　　　　　　　　　　//被压缩的文件的路径
　　　　　　　　　　　　src: "src/*.js",
　　　　　　　　　　　　//被压缩后的文件路径
　　　　　　　　　　　　dest:"dest/concat.js"
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　jshint: {
　　　　　　　　　　files: [‘Gruntfile.js‘],
　　　　　　　　　　　　options: {
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　watch: {
　　　　　　　　　　files: [‘src/*.html‘,‘src/*.css‘],
　　　　　　　　　　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",["uglify","concat","jshint",‘watch‘]);
　　　　};

　　　　 然后cmd窗口中进入到当前项目的根目录输入命令行  ：grunt

　　　　可执行grunt任务grunt watch可监听文件变化