首页 > 代码库 > Grunt的初级应用

Grunt的初级应用

 

Grunt是什么呢?

Grunt是JavaScript世界的构建工具.为什么要用构建工具?一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

为什么要使用Grunt?

Grunt生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个Grunt插件,然后将其发布到npm上吧。

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。;奇数版本号的 Node.js 被认为是不稳定的开发版。

在安装 Grunt 前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能需要 sudo 指令)。

如果你已经安装了 Grunt,现在需要参考一些文档手册,那就请看一看 Gruntfile实例 和如何 配置任务吧。

在继续学习前,你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

下面我们来看看具体的代码吧:

创建一个grunt的方法

module.exports=function(grunt){

引入你要干吗的一个插件
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
  grunt.loadNpmTasks(‘grunt-contrib-concat‘);
  grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
  grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
  grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
  grunt.loadNpmTasks(‘grunt-contrib-watch‘);
 grunt.initConfig({
  uglify:{
    yasuo:{
      options:{
        mangle:false
      },
      expand:true,
      cwd:"development/abc",
      src:‘*.js‘,
      dest:‘a‘
    }
  },

  cssmin:{
    yasuo1:{
      expand:true,
      cwd:‘development/abc‘,
      src:‘*.css‘,
      dest:‘a‘
    }
  },
  concat:{
    hebing:{
    src:"dest1/*.min.css",
    dest: "dest4/he.css"
    }
  },
  htmlmin: {
    options: {
      removeComments: true,//清除html中注释的部分
      removeCommentsFromCDATA: true,
      collapseWhitespace: true,//清空空格
      collapseBooleanAttributes: true,//省略布尔值属性的值
      removeAttributeQuotes: true,
      removeRedundantAttributes: true,//清空所有的空属性
      removeEmptyAttributes: true,//清除所有LINK标签上的type属性
      removeOptionalTags: true //是否清除<html></html>和<body></body>标签
    },
    yasuo2: {
      expand: true,
      cwd: ‘development/abc‘,
      src: ‘*.html‘,
      dest: ‘a‘,
      rename:function(dest2,html){
      return dest2+‘/‘+html.replace(‘.html‘,‘.min.html‘);
    }
  }
},
    imagemin:{
      options:{
        optimizationLevel: 3 //定义 PNG 图片优化水平
      },
      yasuo3: {
        expand: true,
        cwd: ‘development/images‘,
        src: ‘*.{png,jpg,jpeg,gif,webp,svg}‘,
        dest: ‘dest3‘
        }
      },
    jshint:{
      jiance:[
        ‘src/*.js‘
        ],
      },
    watch:{
      jiant:{
        files:[‘src/*.js‘,‘css/*.css‘,‘html/*.html‘,‘img/*.{png,jpg,jpeg,gif,webp,svg}‘,‘src/*.js‘],
        tasks:[‘uglify‘,‘cssmin‘,‘concat‘,‘htmlmin‘,‘imagemin‘,‘jshint‘]
      }
    }

  })
  grunt.registerTask("default",[‘uglify‘,‘cssmin‘,‘concat‘,‘htmlmin‘,‘imagemin‘,‘jshint‘,‘watch‘]);
}

今天由于时间仓促就不加注释了,希望各位原谅,但是我相信以你们聪明的大脑也是可以看懂的,再见了.

Grunt的初级应用