手机版

用人工智能构建一个网络程序

时间:2021-11-07 来源:互联网 编辑:宝哥软件园 浏览:

大致有以下几个步骤:创建一个新的项目Bejs,创建一个新的文件package.json,创建一个新的文件Gruntfile.js,在命令行上执行grunt任务。1.在src下创建一个新的项目Bejs源代码,目录中有两个js文件,selector.js和ajax.js.编译后的代码放在dest中,这个咕噜声会自动生成。

第二,在根目录下新建一个package.jsonpackage.json,里面包含项目的一些元信息,比如项目名称、描述、版本号、依赖包等。它应该像源代码一样提交给svn或git。目前项目结构如下

Package.json内容要符合json语法规范,如下,复制代码如下: {'name' :' bejs ',' version' :' 0.1.0 ',' dev dependencies ' 3360 { ' Grunt ' 3360 ' ~ 0 . 4 . 0 ',Grunt-contrib-js hint ' : ' ~ 0 . 1 . 1 ',' Grunt-contrib-uglify ' : ' ~ 0 . 1 . 2 ',' Grunt-contrib 'grunt-contrib-js hint/grunt-contrib-uglify/grunt-contrib-concat未安装。三分别为三个任务(task) grunt-contrib-jshint js语法检查grunt-contrib-uglify压缩,并使用UglifyJS grunt-contrib-concat合并文件。此时,打开命令行工具,进入项目根目录,点击以下命令3360 NPM安装

再次查看根目录,发现node_modules目录较多,包括4个子目录,如图

第三,新文件gum file . jsgum file . js也放在项目的根目录下,几乎所有的任务都是在这个文件中定义的。它是一个普通的js文件,在其中可以编写任何js代码,而不仅仅是JSON。像package.json一样,应该像源代码一样提交给svn或git。

Gruntfile.js是由以下内容组成的包装函数,其结构如下,是Node.js的典型编写方式,使用exports公共API复制的代码如下: module . exports=function(grunt){//在这里做grunt相关的事情};和项目配置,加载grunt插件和任务定制,执行任务。本示例完成以下任务,并合并src(ajax.js/)下的文件。Selector.js)将domop.js压缩为domop.min.js两个文件都放在dest目录中。Gruntfile.js的最终副本代码如下: module . exports=function(grunt){//Configure grunt . initconfig({ pkg 3360 grunt . file . readjson(' package . JSON ')),concat 3360 { domop 3360 { src :[' src/Ajax . js ',' src/selector.js'],dest 3360 ' dest/domop . js ' } },uglify : { options%=pkg . name % %=grunt . template . today(' yyyy-mm-DD ')% */\ n ' },build : { src : ' dest/domop . js ',dest : ' dest/domop . min . js ' } } });//加载concat和uglify插件,分别用于合并和压缩grunt . load npmttasks(' grunt-contrib-concat ');grunt . loadnpmttasks(' grunt-contrib-uglify ');//注册任务grunt.registertask ('default ',['concat ',' uglify ']);};第四,执行grunt任务,打开命令行,输入项目的根目录,键入grunt

从打印的信息可以看出,目的目录和预期文件已经成功合并和压缩。此时,项目目录中还有更多dest,如下所示

好了,这里有两个常见的任务:concat和uglify、jshint等。gum file . js中的代码没有被一一解读。感兴趣的学生可以在gruntjs的官方文档中找到它们。

版权声明:用人工智能构建一个网络程序是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。