码迷,mamicode.com
首页 > 其他好文 > 详细

将你的静态工程用Grunt管理

时间:2015-02-27 14:50:50      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

  最近写了一个静态页面,写完之后都会上传到静态服务器上。但是我遇到一个问题,就是每次修改文件后就要重新找一些代码压缩网站去压缩静态文件。有没有什么办法能够自动化的处理呢?答案当然是肯定的。

  我们可以借用Grunt来帮助我们完成。只需要将现有的工程配置成grunt工程即可。那么我们一起来看看吧:

第一步:在本地安装grunt

  grunt是基于Node.js所以要先安装node   http://nodejs.org/download/

  安装 grunt   

npm install -g grunt-cli

    如果以上安装不成功过,还可以尝试使用国内的代理,

npm install -g cnpm --registry=http://r.cnpmjs.org

    安装cnpm国内镜像, 以后所有npm命令换成用cnpm执行即可

第二步:配置grunt工程

  使用grunt主要涉及两个文件 package.json 和 Gruntfile.js ,如果熟悉node的同学应该知道package.json 是描述工程和配置依赖的文件。这里也是一样的,Gruntfile.js是grunt运行的脚本。

这两个文件都可以手动添加或从其他的工程中拷贝过来。我们也可以通过命令自动生成其中的package.json文件。

  我们先在工程中创建一个空文件Gruntfile.js ,然后输入命令:npm init 根据提示配置工程。注意要指定  "main": "Gruntfile.js" 其他的可以一路回车使用默认值。文件生成好了,我们可以打开它加入依赖的配置(添加 devDependencies 节点),下面就用我的工程举例:

 1 {
 2   "name": "xxx",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "Gruntfile.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "repository": {
10     "type": "git",
11     "url": ""
12   },
13   "author": "",
14   "license": "ISC",
15   "dependencies": {
16     "grunt": "~0.4.5",
17     "grunt-contrib-uglify": "~0.6.0",
18     "grunt-contrib-cssmin": "~0.10.0"
19   },
20   "devDependencies": {
21     "grunt": "^0.4.5",
22     "grunt-contrib-concat": "~0.5.0",
23     "grunt-contrib-copy": "~0.6.0",
24     "grunt-contrib-less": "~0.11.4",
25     "grunt-contrib-requirejs": "~0.4.4",
26     "grunt-contrib-watch": "~0.6.1",
27     "grunt-replace": "~0.8.0",
28     "underscore": "~1.7.0"
29   }
30 }

  这样package.json文件就写好了,接下来我们要根据package.json的配置安装依赖,方法是git bash到工程目录下,输入 npm install 或 cnpm install 将把 package.json->devDependencies下注明的依赖包下载到 node_modules

  我们安装好后就可以编写Gruntfile.js文件了。详细的规则可以参照官网中给出的范例 http://www.gruntjs.org/docs/sample-gruntfile.html  对于我的工程我是这样写的:

 1 //var fs = require(‘fs‘);
 2 //var _ = require(‘underscore‘);
 3 
 4 module.exports = function(grunt){
 5     //var jsFinal = [], cssFinal = [];
 6 
 7     //项目配置
 8     grunt.initConfig({
 9         pkg: grunt.file.readJSON(‘package.json‘),
10 
11         uglify: {
12             options: {
13                 mangle: {
14                     except: [‘requirejs‘, ‘require‘, ‘define‘, ‘module‘, ‘exports‘, ‘md5‘, ‘_‘, ‘jQuery‘]
15                 }
16             },
17             build:{
18                 files: {
19                     ‘build/js/main.js‘: [‘js/index.js‘]
20                 }
21             },
22             combine: {
23                 expand: true,
24                 files: {
25                     ‘build/js/lib.js‘: [‘js/zepto.min.js‘, ‘js/PxLoader.js‘, ‘js/PxLoaderImage.js‘, ‘idangerous.swiper.min.js‘]
26                 }
27             }
28         },
29         copy: {
30             main: {
31                 files: [
32                     { expand: true, src: ‘*.html‘, dest: ‘build/‘ }
33                 ]
34             },
35             binary: {
36                 files: [
37                     { expand: true, src: ‘images/**‘, dest: ‘build/‘}
38                 ]
39             }
40         },
41         concat: {
42             options: {
43                 stripBanners: true
44             },
45             combine: {
46                 expand: true,
47                 files: {
48                     ‘build/css/base.css‘: [‘css/idangerous.swiper.css‘, ‘css/animate.css‘, ‘css/index.css‘],
49                     ‘build/css/main.css‘: [‘css/index.css‘]
50                 }
51             }
52         },
53         // watch: {
54         //     lessc: {
55         //         files: [‘styles/*.less‘],
56         //         tasks: [‘less‘],
57         //         options: {
58         //             spawn: false,
59         //         },
60         //     },
61         // }
62         cssmin: {
63             options: {
64                 ‘compatibility‘: ‘ie8‘
65             },
66             combine: {
67                 expand: true,
68 
69                 files: {
70                     ‘build/css/base.min.css‘: [‘build/css/base.css‘],
71                     ‘build/css/main.min.css‘: [‘build/css/main.css‘]
72                 }
73             }
74         }
75 
76 
77 
78     });
79 
80 
81     // grunt 官方任务加载
82     grunt.loadNpmTasks(‘grunt-contrib-copy‘);
83     grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
84     grunt.loadNpmTasks(‘grunt-contrib-concat‘);
85     grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
86     // grunt.loadNpmTasks(‘grunt-contrib-watch‘);
87 
88 
89     //自定义任务
90     grunt.registerTask(‘default‘, [‘concat‘, ‘cssmin‘, ‘copy‘, ‘uglify‘]);
91 
92 }

  当这两个文件都写完了,我们可以运行grunt命令来生成我们的目标文件,在这里我指定生成到build文件夹下。

第三步:提交

  当我准备提交,输入 git status 时我发现git监控了一些我不想提交的文件,我们可以用 .gitignore 来让git忽略一些文件和文件夹,方法如下:

  首先我们要创建.gitignore文件 但是在windows下我们不能直接创建一个没有文件名的文件。我们需要通过Linux命令来创建它:

vi .gitignore

  然后 :wq 保存文件,之后用编辑器打开,输入想忽略的文件夹,对于我的工程,如下:

1 node_modules/
2 build/

  即,我不想上传grunt加载的包 和 生成文件。

总结:使用grunt管理工程还有很多高大上的技巧,这里我仅介绍一些简单的用法。

  

 

将你的静态工程用Grunt管理

标签:

原文地址:http://www.cnblogs.com/webARM/p/4301880.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!