Grunt配置

来源:互联网 发布:会计电算化软件下载 编辑:程序博客网 时间:2024/05/01 12:37
  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']);


    };
0 0
原创粉丝点击