关于windows 下的grunt

记录一下。

前期安装准备工作

1、nodejs和npm的安装

从以下地址下载安装Windows Installer (.msi)的64位的。

<a href="https://nodejs.org/download/"><code class="sql"> https://nodejs.org/download/</code></a>

相对于老版本的nodejs,这个已经集成了npm。

安装后到命令行使用命令

<code class="sql">/  node -v</code>

就能看到版本号了。

2、安装grunt

还是在命令行输入

npm install -g grunt-cli

3、安装git

http://git-scm.com/download

从这里下载安装。

然后到命令行输入git看看有没有安装成功。

如果不行安装github

https://windows.github.com/

 

然后在开始菜单从github里边找到 git shell.

之后就是开始啦~~~

创建一个工程目录比如project;

命令行在该目录下输入

<span style="font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace;"><span style="font-size: 13px; line-height: 19.5px;">npm init</span></span>

然后会出现一些引导,这些引导你要修改就输入,不修改直接回车就好

QQ图片20150526111053

然后你就会发现在project文件夹里多了一个package.json。

输入命令

<code class="shell">sudo npm <span class="hljs-operator"><span class="hljs-keyword">install</span> grunt <span class="hljs-comment">--save-dev</span></span></code>

就会发现出现一个文件夹node_modules

然后是用git下载grunt的模板来生成Gruntfile.js

<del>git clone git://github.com/gruntjs/grunt-init-gruntfile.git $HOME/.grunt-init/
git clone git://github.com/gruntjs/grunt-init-jquery.git $HOME/.grunt-init/
git clone git://github.com/gruntjs/grunt-init-node.git $HOME/.grunt-init/</del>

这三个分别是默认grunt模板,jquery插件的grunt模板,node包的grunt模板。

然后我下载的是第一个,把它放到project文件夹下的temp文件夹里。

输入

<del>grunt-init temp/</del>

 

 

 

除了这个package.json还需要一个Gruntfile.js 才构成了grunt的基本配置。

 /*global module:false*/
module.exports = function(grunt) {
  //配置grunt
  grunt.initConfig({
     //设定grunt配置文件json位置
     pkg: grunt.file.readJSON('package.json'),
  });
  //设定在该目录执行grunt命令,所执行注册的任务。
  grunt.registerTask('default', []);
};

这里命令行执行grunt,会出现Done.等字样。就说明成功啦。

关于grunt的插件

grunt官方有很多插件,http://www.gruntjs.net/plugins  这个顺序就是受欢迎程度,在前边的肯定没错啦。

现在来设定第一个插件contrib-uglify

这是一个压缩js文件的插件。这个基本上目前前端基本的要求,哪个没有·.min.js文件。

安装它跟安装grunt类似

<code class="shell">npm <span class="hljs-operator"><span class="hljs-keyword">install</span> grunt-contrib-uglify <span class="hljs-comment">--save-dev</span></span></code>

你会发现在package.json里边出现一行”grunt-contrib-uglify”: “^0.9.1″

这里随便建立一个src/a.js文件

 (function(window){
    var Things;
    function dofor(){
       for (var i = 0; i &lt; Things.length; i++) {
          Things[i]=0;
       };
   }
 dofor();
})(window);

目的是压缩他,那么怎么设定,修改·Gruntfile.js,在grunt.initConfig中添加

 uglify: {
   options: {
     banner: '/*! &lt;%= pkg.name %&gt; &lt;%= grunt.template.today("yyyy-mm-dd") %&gt; */\n'
   },
   build: {//压缩所有文件
     files: [{
       expand:true,
       cwd:'src',//js目录下
       src:'**/*.js',//所有js文件
       dest: 'build/js/'
     }]
   },
 }

然后为了让grunt加载插件,在grunt.initConfig语句后添加

 grunt.loadNpmTasks('grunt-contrib-uglify');

 

之后为了让grunt命令能够执行插件将最后一句修改为

 grunt.registerTask('default', ['uglify']);

然后执行grunt

QQ图片20150612160811

 

关于js查错

js文件非常容易错误,那么就要有个差错工具。总去浏览器直接测试效果实在是太慢啦。

所以这里需要contrib-jshint

<code class="shell">npm <span class="hljs-operator"><span class="hljs-keyword">install</span> grunt-contrib-jshint <span class="hljs-comment">--save-dev</span></span></code>

在grunt.initConfig中添加

 jshint: {
   build: ['Gruntfile.js','src/*.js'],
   options:{
    jshintrc:'.jshintrc'
   }  
 }

在grunt.initConfig语句后添加

 grunt.loadNpmTasks('grunt-contrib-jshint');

最后一句修改为

 grunt.registerTask('default', ['jshint','uglify']);

添加一个文件jshint.json,这个是jshint的配置文件,你每次需要检查什么错误,不检查什么,在这里规定。这里是个简单的例子,复杂的可以搜索jshint 配置 这样会有一些更合适生产环境的配置清单。

{
 "boss":false,
 "curly":true
}

然后运行看看,一个个任务依次进行,多听话~

自动化嘛

一遍遍执行grunt,实在称不上懒人程度员。所以这里需要contrib-watch

<code class="shell">npm <span class="hljs-operator"><span class="hljs-keyword">install</span> grunt-contrib-watch <span class="hljs-comment">--save-dev</span></span></code>

在grunt.initConfig中添加

 watch: {
   build: {
     files: ['src/*.js','src/*.css'],
     tasks: ['uglify'],
     options: {spawn:false}
   }
 }

在grunt.initConfig语句后添加

 grunt.loadNpmTasks('grunt-contrib-watch');

最后一句修改为

 grunt.registerTask('default', ['jshint','uglify','watch']);

 

执行一次grunt .出现那行

Waiting…

呀,在看着你,看着你~

 


 

 


 

 

此条目发表在网站基础分类目录。将固定链接加入收藏夹。