您的位置：首页 > Web前端

Grunt——前端自动化构建工具

2015-04-30 18:12 357 查看
Grunt和Grunt插件是通过npm安装并管理的，npm是Node.js的包管理器。

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

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

安装：grunt-cli

npminstall-ggrunt-cli

在使用Grunt时，请先看看官网，先创建两个文件
package.json:配制插件，等其他参数


{
"name":"WebApp",
"version":"0.1.0",//这个请注意格式，防止出现'0.1’,'1',这些值会出现莫名错误
"repository":{
"type":"git",
"url":"git://github.com/gruntjs/grunt.git"
},
"devDependencies":{
"grunt":"~0.4.5",
"grunt-contrib-clean":"~0.6.0",
"grunt-contrib-coffee":"~0.12.0",
"grunt-contrib-compass":"~1.0.3",
"grunt-contrib-concat":"~0.5.1",
"grunt-contrib-cssmin":"~0.12.2",
"grunt-contrib-csslint":"~0.4.0",
"grunt-contrib-htmlmin":"~0.4.0",
"grunt-contrib-imagemin":"~0.9.4",
"grunt-contrib-uglify":"~0.9.1",
"grunt-contrib-jshint":"~0.11.2",
"grunt-contrib-watch":"~0.6.1",
"grunt-contrib-requirejs":"~0.4.4",
"grunt-usemin":"~3.0.0",
"grunt-filerev":"~2.3.1",
"grunt-contrib-copy":"~0.8.0"
}
}


Gruntfile.js:自定义任务

module.exports=function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
useminPrepare:{
html:'app/index.html'
},
concat:{
js:{
dest:'tmp/concat/app.js',
src:[
'app/js/app.js',
'app/js/index.js',
'app/js/thing-model.js',
'app/js/thing-view.js'
]
}
},
uglify:{
js:{
dest:'tmp/uglify/app.js',
src:['tmp/concat/app.js']
}
},
filerev:{
js:{
dest:'filerev/js',
src:['app/js/*.js','tmp/uglify/*.js']
},
scc:{
dest:'filerev/css',
src:['app/css/*.css']
}
},
usemin:{
html:'app/index.html',
options:{
assetsDirs:['tmp/uglify','']//这个值请注意，当执行时不能正常替换静态资源引用时，就是他在作怪
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');//注册插件，必需
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-filerev');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-contrib-clean');
//默认任务顺序
grunt.registerTask('default',[
'useminPrepare',
'concat',
'uglify',
'filerev',
'usemin'
]);
};


配制成功后cmd进入你的项目根目录下

npminstall

安装插件，时间很长点

然在根目录下执行

grunt

执行默认任务

demo:

目录：


<!DOCTYPEhtml>
<html>
<head>
<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"/>
<title>Title</title>
<!--build:js/tmp/uglify/app.js-->
<scriptsrc="/app/js/app.js"></script>
<scriptsrc="/app/js/index.js"></script>
<scriptsrc="/app/js/thing-model.js"></script>
<scriptsrc="/app/js/thing-view.js"></script>
<!--endbuild-->
<scriptsrc="/app/js/app.js"></script>
<scriptsrc="/app/js/index.js"></script>
<scriptsrc="/app/js/thing-model.js"></script>
<scriptsrc="/app/js/thing-view.js"></script>
<linkhref="/app/css/index.css"rel="stylesheet"/>
</head>
<body>
<!--{"app\\js\\app.js":"filerev\\js\\app.bc7ed700.js",
"app\\js\\index.js":"filerev\\js\\index.7f1f0127.js",
"app\\js\\thing-controller.js":"filerev\\js\\thing-controller.7f1f0127.js",
"app\\js\\thing-model.js":"filerev\\js\\thing-model.a74d0e62.js",
"app\\js\\thing-view.js":"filerev\\js\\thing-view.d80fca0d.js"}-->
<p>thisisagruntusemin</p>
<imgsrc="image.png"/>
</body>
</html>


body中的注释内容为

grunt-filerev插件的map,grunt-usemin就是使用他来替换引用

替换引用后得：


<!DOCTYPEhtml>
<html>
<head>
<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"/>
<title>Title</title>
<scriptsrc="/tmp/uglify/app.6bdcf715.js"></script>
<scriptsrc="/app/js/app.bc7ed700.js"></script>
<scriptsrc="/app/js/index.7f1f0127.js"></script>
<scriptsrc="/app/js/thing-model.a74d0e62.js"></script>
<scriptsrc="/app/js/thing-view.d80fca0d.js"></script>
<linkhref="/app/css/index.704e3ff7.css"rel="stylesheet"/>
</head>
<body>
<!--{"app\\js\\app.js":"filerev\\js\\app.bc7ed700.js",
"app\\js\\index.js":"filerev\\js\\index.7f1f0127.js",
"app\\js\\thing-controller.js":"filerev\\js\\thing-controller.7f1f0127.js",
"app\\js\\thing-model.js":"filerev\\js\\thing-model.a74d0e62.js",
"app\\js\\thing-view.js":"filerev\\js\\thing-view.d80fca0d.js"}-->
<p>thisisagruntusemin</p>
<imgsrc="image.png"/>
</body>
</html>


以上就是我现在，还在摸索的grunt,后面慢慢研究研究！希望有一天能用上他


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航