前端开发自动化工具Grunt和bower
博客专区 > DoIt 的博客 > 博客详情
前端开发自动化工具Grunt和bower
DoIt 发表于1年前
前端开发自动化工具Grunt和bower
  • 发表于 1年前
  • 阅读 10
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

自动化工作流

我们的产品基于复杂的流程,有很多步骤需要执行,比如从最后一次部署清理临时文件。
校验代码,连接和最小化javascript文件,拷贝图片,配置文件等资源文件,运行测试等等其它工作。

根据环境的不同,工作流的内容也可能有所不同。
使用Grunt自动工作流
使用Bower管理包

Grunt是一个JavaScript任务运行器,它自动运行重复的繁杂的任务。
它也可以将希望被执行的任务打包成任何序列,来创建工组流。

基于插件工作,它有一个庞大的生态系统拥有成千上万的可下载的插件选择。
我们也可以创建自己的插件并共享到社区。

npm install -g grunt-cli grunt


Gruntfile.js 文件是用JavaScript定义的每个任务,插件和工作流的配置。

module.exports = function(grunt){    
    //1-- 配置每个任务
    grunt.initConfig({    
    });
    
    //2-- 加载插件
    grunt.loadNpmTasks('plugin name');
    
    //3-- 通过对任务分组创建一个工作流
    grunt.registerTask('taskName',['task1','task2','task3']);
}
可以通过 npm init 生成下面的依赖管理文件:
package.json 

创建一个分发包:
在向生产环境部署之前,我需要创建一个优化的分发包:
性能:通过连接步骤,我们可以大大减少浏览器请求次数。
应用程序所有的脚本都可以被连接成一个文件。
接着是缩小步骤,移除文件中所有的空白,行间隔,评论,替换本地变量和函数使它们
比原来定义更短一些。这样通过减少需要传递的字节数来提高性能。
HTML和CSS文件也需要被缩小,图片可以通过特定的处理器优化。
Grunt有许多处理以上任务的插件可以下载使用。


安全:通过移除空格,行段,评论和替换本地变量名,javascript文件变的更加难以理解。
我们应该使用数组来定义依赖机制,将每个依赖定义成字符串。

质量:这里有两个步骤来提高分发内容的质量。第一个校验步骤,比如JSLint或者JSHint。

1、清理安装
   首先清理我们上一次安装的文件,它可以通过插件grunt-contrib-clean来完成。
   注意哪些需要配置哪些目录,防止一些文件被错删。
   安装该插件: npm install grunt-contrib-clean --save-dev
   
   安装之后我们需要配置它:
   Gruntfile.js
   
   module.exports = function(grunt){
    grunt.initConfig({
        clean:{
            dist:["dist/"]
        }
    });
    
    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.registerTask("dist",["clean"]);
   }
   
   这里我们创建了分发文件包位于dist/目录下。
   
 2、校验步骤:校验我们使用插件 grunt-contrib-jsint
    通过如下命令安装它:
    npm install grunt-contib-jsint --save-dev
    
    然后再gruntfile.js文件中对其进行配置
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                all:['Gruntfile.js','js/**/*.js','test/**/*.js']
            }
        });
    
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        
        grunt.registerTask("dist",["clean","jshint"]);
    }
    
3、连接阶段:通过插件grunt-contrib-concat ,连接配置设置的原文件成一个目标文件。
该插件安装命令:
    npm install grunt-contrib-concat --save-dev
    
    接下来在gruntfile.js文件中配置该插件:
    我们通过concat对象的src属性设置源文件目录,通过dest属性设置目标文件目录。
    
    module.exports = function(grunt0{
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["src/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            }
        });
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        
        grunt.registerTask("dist", ["clean", "jshint", "concat"]);
}
   
 4、Minifying 步骤:
    缩小步骤,包括去掉空格,换行符,评论,替换变量和函数名等操作。
    这些都可以使用插件 grunt-contrib-uglify 完成
    npm install grunt-contrib-uglify --save-dev
    
    配置该插件,跟grunt-contrib-concat类似,需要定义uglify对象的src和dest属性。
    Gruntfile.js
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        
        grunt.registerTask("dist",["clean","jshint","concat","uglify"]);
    }

5、拷贝步骤,有许多文件比如images,fonts等其它需要无损的拷贝的文件。
    可以使用grunt-contrib-copy插件来定义完成,它能够拷贝文件夹和文件。
    npm install grunt-contib-copy --save-dev
    
    配置信息:
    Gruntfile.js
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"]
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        
        grunt.registerTask("dist", ["clean", "jshint", "concat","uglify", "copy"]);
    }
    
6、测试步骤:
   Grunt调用grunt-karma插件通过读取karma.conf.js 文件,并运行测试。
   插件安装:npm install grunt-karma --save-dev
   在Gruntfile.js文件中我们只需要配置Karam的配置文件位置即可。
   
   module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            },
            karma:{
                dist:{
                    configFile:"karam.conf.js"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        grunt.loadNpmTasks("grunt-karma");
        grunt.registerTask("dist", ["clean", "jshint", "concat",
        "uglify", "copy", "karma"]);
    }

7、运行阶段:    
    作为最后一个可选步骤,是在分发包被编译后运行应用程序。
    Grunt有一个服务器插件 grunt-connect
    安装它: npm install grunt-contrib-connect --save-dev
    
    在Gruntfile.js文件中对服务插件进行配置:
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            },
            karam:{
                dist:{
                    configFile:"karam.conf.js"
                }
            },
            connect:{
                dist:{
                    options:{
                        port:9001,
                        base:'dist/'
                    }
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        grunt.loadNpmTasks("grunt-karma");
        grunt.loadNpmTasks("grunt-contrib-connect");
        
        grunt.registerTask("dist",["clean","jshint","concat","uglify","copy","karma","connect:dist:keepalive"]);
    }
    
    注意在配置 connect运行时需要使用keepalive否则服务只会在Grunt运行时运行。
    
    所有插件安装完成后的package.json 文件内容:
    {
        "name": "parking",
        "version": "0.1.0",
        "devDependencies": {
            "grunt": "~0.4.5",
            "grunt-contrib-clean": "~0.5.0",
            "grunt-contrib-jshint": "~0.10.0",
            "grunt-contrib-concat": "~0.4.0",
            "grunt-contrib-uglify": "~0.5.0",
            "grunt-contrib-copy": "~0.5.0",
            "grunt-karma": "~0.8.3",
            "karma": "~0.12.16",
            "grunt-contrib-connect": "~0.8.0"
        }
    }
    
    我们还可以直接创建package.json文件,然后运行 npm install 来一次性完成安装。
    
    
执行工作流:

grunt <name of the task or workflow>

比如执行一个清理任务:

grunt clean

我们可以为每个任务定义多个配置文件,比如connect 服务
connect: {
    production: {
        options: {
            port: 9001,
            base: 'dist/'
        }
    },
    development: {
        options: {
            port: 9002,
            base: '/'
        }
    }
}

我们还可以生成两个连接文件,一个是源代码连接文件,一个是类库连接文件。
concat: {
    js: {
        src: ["js/**/*.js"],
        dest: "dist/js/scripts.js"
    },
    lib: {
        src: ["lib/**/*.js"],
        dest: "dist/lib/lib.js"
    }
}

运行命令: grunt concat

或者分别执行:
grunt concat:js
grunt concat:lib


使用Bower进行包管理
Bpwer是Twitter推出的包管理器,聚焦于前端应用。

安装 bower
 
npm install -g bower

查找包
bower search <package name>

安装包
bower install <package name>

bower install angular --save

该angular包惠被从Git库中下载并存放到bower_components/ 目录下。
--save 指令用于更新bower.json 文件。

我们可以通过
bower list 
查看下载的包列表

更新包
bower update <package name>

卸载包
bower uninstall angularjs-file-upload --save

使用包:
<script src="bower_components/angular/angular.min.js"></script>


缓存
移除的包会在Bower的缓存中有残留,位于用户的 home 文件夹的 cache/bower 目录下,我们可以通过如下指令
查看
bower cache list

Bower还可以离线安装包,只需要执行如下命令
bower install angular --offline

清理缓存包并删除所有下载包
bower cache clean

共有 人打赏支持
粉丝 2
博文 53
码字总数 248750
评论 (0)
×
DoIt
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: