grunt 使用

grunt 服务端， grunt-cli 客户端

  1、grunt 插件安装：

  package.json, 存放grunt所需插件

  

{
  "name": "demo",
  "version": "0.1.0",
  "description": "demo",
  "private": "true",
  "author": "hzijone",
  "license": "MIT",
  "devDependencies": {
    "btoa": "~1.1.2",
    "glob": "~5.0.14",
    "grunt": "~0.4.5",
    "grunt-autoprefixer": "~3.0.3",
    "grunt-contrib-clean": "~0.6.0",
    "grunt-contrib-compress": "~0.13.0",
    "grunt-contrib-concat": "~0.5.1",
    "grunt-contrib-connect": "~0.10.1",
    "grunt-contrib-copy": "~0.8.0",
    "grunt-contrib-csslint": "~0.5.0",
    "grunt-contrib-cssmin": "~0.12.3",
    "grunt-contrib-htmlmin": "~0.4.0",
    "grunt-contrib-jade": "~0.15.0",
    "grunt-contrib-jshint": "~0.11.2",
    "grunt-contrib-less": "~1.0.1",
    "grunt-contrib-qunit": "~0.7.0",
    "grunt-contrib-uglify": "~0.9.1",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-csscomb": "~3.0.1",
    "grunt-exec": "~0.4.6",
    "grunt-html": "~4.0.3",
    "grunt-jekyll": "~0.4.2",
    "grunt-jscs": "~1.8.0",
    "grunt-saucelabs": "~8.6.1",
    "grunt-sed": "twbs/grunt-sed#v0.2.0",
    "load-grunt-tasks": "~3.2.0",
    "markdown-it": "^4.4.0",
    "npm-shrinkwrap": "^200.4.0",
    "time-grunt": "^1.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

 

 执行命令：npm install , 会在当前目录生成一个文件夹:node_module，存放安装成功的插件

配置内容详述：

. `_"private":"true"=>不上传到github_`
. Dependenciesg与devDependencies的区别：
    .. devDependencies：如果只需要下载使用某些模块，而不下载这些模块的测试和文档框架
    .. 指示当前包所依赖的其他包


. { "dependencies" :
  { "foo" : "1.0.0 - 2.9999.9999"
  , "bar" : ">=1.0.2 <2.1.2"
  , "baz" : ">1.0.2 <=2.3.4"
  , "boo" : "2.0.1"
  , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
  , "asd" : "http://asdf.com/asdf.tar.gz"
  , "til" : "~1.2"
  , "elf" : "~1.2.3"
  , "two" : "2.x"
  , "thr" : "3.3.x"
  }
}

版本格式可以是下面任一种：
version 完全匹配
>version 大于这个版本
>=version大于或等于这个版本
<version
<=version
~version 非常接近这个版本
^version 与当前版本兼容
1.2.x X代表任意数字，因此1.2.1, 1.2.3等都可以
http://... Unix系统下使用的tarball的URL。
            **** 任何版本都可以
""任何版本都可以
version1 - version2  等价于 >=version1 <=version2.
range1 || range2 满足任意一个即可
git... Git地址
user/repo


WARNING: npm WARN package.json [email protected] No repository field. +
npm WARN package.json [email protected] No README data。 +
*出现上述警告，是因为没有加github及README的文件*

 

 

2、执行grunt 

   文件：Gruntfile.js

   执行命令： grunt 

 

 

  Gruntfile.js配置

  

module.exports = function(grunt) {



    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

    
    uglify:{

         options:{},

         // build 都可以
   

         // build: {
      //           //源文件
      //           src: 'js/bootstrap.js',
      //           //目标文件
      //           dest: 'js/bootstrap.min.js'
      //       },


       dist:{  
        files: [
            {
                expand: true,
                cwd: 'js/',
                src: ['**/*.js'],
                dest: 'js/',
                ext: '.min.js',
                extDot: 'first'
            },
        ]
       }

   

    },        
    cssmin: {

             options: {  
                 keepSpecialComments: 0  
             },  
             compress: {  
                 files: {  
                         'css/bootstrap.min.css': 'css/bootstrap.css' 
                         }  
                     }  
         },  

    watch: {
       
       // files: ['<%= uglify.dist.files %>'],
        files: 'js/*',
        tasks: ['uglify'],
        options: {
                // Start another live reload server on port 1337
                livereload: true,
            }

    }




        });


        //加载Grunt插件
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-watch');
        // 默认的grunt 任务
        grunt.registerTask('default', ['uglify','watch']);


};