Grunt配置

本文主要是介绍Grunt配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 将命令行的当前目录转到项目的根目录下。

2. 一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。

   3.package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

   Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或Gruntfile.coffee。

   package.json应当放置于项目的根目录中，与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

   下面列出了几种为你的项目创建package.json文件的方式：

   • 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
   • npm init命令会创建一个基本的package.json文件。
3. package
4. {
     "name": "my-project-name",
     "version": "0.1.0",
     "devDependencies": {
       "grunt": "~0.4.5",
       "grunt-contrib-jshint": "~0.10.0",
       "grunt-contrib-nodeunit": "~0.4.1",
       "grunt-contrib-uglify": "~0.5.1",
        "grunt-contrib-concat": "^0.5.1"
     }
   }
5. 向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中，遵循tilde version range格式。
   
6. npm install grunt-contrib-jshint --save-dev
7. grntfile.js
8. module.exports = function(grunt) {
   
   
     grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),
       concat: {
         options: {
           separator: ';'
         },
         dist: {
           src: [
             'css/jquery-uis.css',
             'css/testcss.css'],
           dest: 'js/allcsss.css'
         }
       },
       cssmin: {
     target: {
       files: [{
         expand: true,
         cwd: 'css',
         src: ['jquery-uis.css', 'jquery-uis.min.css'],
         dest: 'css',
         ext: '.min.css'
       }]
     }
   },
         uglify: {
       options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
       },
       build: {
         src: 'js/slidebars.js',
         dest: 'js/slidebars.min.js'
       }
     },
       // uglify: {
       //   options: {
       //     banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
       //   },
       //   dist: {
       //     files: {
       //       'js/allcsss.min.js': ['js/allcsss.js']
       //     }
       //   }
       // },
       qunit: {
         files: ['test/**/*.html']
       },
       jshint: {
         files: ['js/testcss.css'],
         options: {
           //这里是覆盖JSHint默认配置的选项
           globals: {
             jQuery: true,
             console: true,
             module: true,
             document: true
           }
         }
       },
       watch: {
         files: ['<%= jshint.files %>'],
         tasks: ['jshint', 'qunit']
       }
     });
   
   
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-jshint');
     // grunt.loadNpmTasks('grunt-contrib-qunit');
     // grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-cssmin');
   
   
     // grunt.registerTask('test', ['jshint', 'qunit']);
   
   
     grunt.registerTask('default', ['jshint', 'concat', 'uglify','cssmin']);
   
   
   };
   

这篇关于Grunt配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---