前端开发--实战篇
2015-10-14 13:11
351 查看
摘要: 以angular为开发框架,实战前端开发项目。
如果不了解前端开发环境,请参考搭建前端开发环境
下面以angular为开发框架,实战个前端开发项目。(windows环境为例)
在cmd里面,进入到public文件夹待命。
按照提示,使用默认配置即可。见下图:
如果不了解package.json,输入命令‘npm help json’查看文档。
如果要安装js库,输入命令‘npm install <pkg> --save’或者‘npm install <pkg> --save-dev’安装,会自动在package.json里添加依赖。其中的'--save-dev'为开发阶段相关的依赖。
安装成功后,观察public文件夹,里面多了个node_modules文件夹,这里放的是通过npm安装的js库。
观察package.json文件内容,发现已经添加了开发阶段的依赖库:
执行初始化配置命令:采用全局方式安装,以便在其他项目中使用。(注意:需已经配置好git的环境)
如果已经安装好grunt-init,则直接执行初始化配置命令:
按照提示,使用默认配置即可。见下图:
观察package.json文件内容,发现已经变成了这样:
其中的jshint是代码检查,watch检测文件变化,qunit单元测试,concat合并文件,uglify压缩文件。
因为已经使用karma测试框架,所以删除qunit的js库。
同样的,在Gruntfile.js文件里删除qunit的task任务。
了解更多grunt,请自行参考grunt文档。
执行命令去安装jshint、watch、concat、uglify的js库:
此命令会自动根据package.json里的依赖,在当前文件夹里安装所需的js库。
步骤四:初始化bower配置文件bower.json,并安装使用到的js、css库
执行初始化配置命令:
请根据向导,按照个人需要输入,大多数可使用默认选项,即可完成配置文件,如下图:
打开并编辑Gruntfile.js,把
修改为:
下面使用bower来安装jquery、angular、bootstrap,执行命令:
其中的‘--save’是自动在bower.json里添加依赖的库。
观察public文件夹,里面多了个bower_components文件夹,这里放的是通过bower安装的js库
观察bower.json文件内容,发现已经添加依赖库了:
还可以到这里搜索你需要的js库并安装。
步骤五:项目目录规划及配置文件的修改
修改grunt配置文件Gruntfile.js,以符合规划的项目目录结构,修改之后的文件内容:
好了,执行下grunt默认的任务,即concat、jshint、uglify任务,试试看,输入命令:
如果看到输出的内容包含下面文字,则恭喜你成功了。
步骤六:结合grunt和grunt-bower-task进行优化
到目前为止,开发所需的js库终于安装配置完毕了。但思考一下,html页面里需要引用我们自己的js文件以及依赖包里的js、css文件,那将需要编写挺多的代码了,另外还需要将bower_components文件夹与项目一起部署,着实不爽。
由于我们已经通过grunt把自己写的js文件合并成一个all.js文件了,所以只需要在html页面引入all.js文件就好了;
为了不将文件夹bower_components与项目一起部署,我们需要复制用到的js、css文件到dist/lib文件夹下,供html页面使用。这一步骤,我们可以通过grunt-bower-task来自动完成。
下面我们来安装grunt的这个插件,执行命令:
多一嘴,npm安装的是开发测试所需的js库,bower安装的是项目依赖的js库。
安装完毕后,把grunt-bower-task插件植入。
打开并编辑grunt配置文件Gruntfile.js,加上:
如果不清楚如何安装grunt插件,参考grunt-bower-task的文档。
好了,再执行下grunt默认的任务,即concat、jshint、uglify、bower任务,试试看,输入命令:
执行成功后,发现在dist/lib文件夹下,我们的jquery、angular、bootstrap都复制过来了。但,等等,我们需要的是bootstrap的css文件,怎么把js文件复制过来了。
打开bower.json并追加下面文字:
再次执行grunt命令,并查看dist/lib/bootstrap文件夹。 这下成功了。可以开始编码了。
本章项目源码:http://git.oschina.net/lazyandroid/public/commit/b0aa4ba4d4fced6d73b6d88ce2fa9a86b975a788
项目中用到了angular-ui-router,使用下面命令安装:
如果不了解前端开发环境,请参考搭建前端开发环境
下面以angular为开发框架,实战个前端开发项目。(windows环境为例)
步骤一:初始化项目目录
创建项目根目录文件夹:public在cmd里面,进入到public文件夹待命。
步骤二:初始化node配置文件package.json
执行初始化配置命令:npm init
按照提示,使用默认配置即可。见下图:
如果不了解package.json,输入命令‘npm help json’查看文档。
如果要安装js库,输入命令‘npm install <pkg> --save’或者‘npm install <pkg> --save-dev’安装,会自动在package.json里添加依赖。其中的'--save-dev'为开发阶段相关的依赖。
步骤三:安装并初始化grunt配置文件Gruntfile.js
执行安装grunt命令:npm install grunt --save-dev
安装成功后,观察public文件夹,里面多了个node_modules文件夹,这里放的是通过npm安装的js库。
观察package.json文件内容,发现已经添加了开发阶段的依赖库:
"devDependencies": { "grunt": "^0.4.5" }
执行初始化配置命令:采用全局方式安装,以便在其他项目中使用。(注意:需已经配置好git的环境)
npm install -g grunt-init git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile grunt-init gruntfile
如果已经安装好grunt-init,则直接执行初始化配置命令:
grunt-init gruntfile
按照提示,使用默认配置即可。见下图:
观察package.json文件内容,发现已经变成了这样:
{ "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-watch": "~0.6.1", "grunt-contrib-qunit": "~0.5.2", "grunt-contrib-concat": "~0.4.0", "grunt-contrib-uglify": "~0.5.0" } }
其中的jshint是代码检查,watch检测文件变化,qunit单元测试,concat合并文件,uglify压缩文件。
因为已经使用karma测试框架,所以删除qunit的js库。
同样的,在Gruntfile.js文件里删除qunit的task任务。
了解更多grunt,请自行参考grunt文档。
执行命令去安装jshint、watch、concat、uglify的js库:
npm install
此命令会自动根据package.json里的依赖,在当前文件夹里安装所需的js库。
步骤四:初始化bower配置文件bower.json,并安装使用到的js、css库
执行初始化配置命令:bower init
请根据向导,按照个人需要输入,大多数可使用默认选项,即可完成配置文件,如下图:
打开并编辑Gruntfile.js,把
pkg: grunt.file.readJSON('package.json'), banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
修改为:
pkg: grunt.file.readJSON('bower.json'), banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.authors[0] %>;' + ' <%= pkg.license %> License */\n\n',
下面使用bower来安装jquery、angular、bootstrap,执行命令:
bower install jquery --save bower install angular --save bower install bootstrap --save
其中的‘--save’是自动在bower.json里添加依赖的库。
观察public文件夹,里面多了个bower_components文件夹,这里放的是通过bower安装的js库
观察bower.json文件内容,发现已经添加依赖库了:
"dependencies": { "jquery": "~2.1.4", "angular": "~1.4.7", "bootstrap": "~3.3.5" }
还可以到这里搜索你需要的js库并安装。
步骤五:项目目录规划及配置文件的修改
修改grunt配置文件Gruntfile.js,以符合规划的项目目录结构,修改之后的文件内容:
/*global module:false*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('bower.json'), banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.authors[0] %>;' + ' <%= pkg.license %> License */\n\n',
// Task configuration.
concat: {
options: {
banner: '<%= banner %>',
stripBanners: true
},
dist: {
src: ['app/js/**/*.js'],
dest: 'app/dist/all.js'
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
dist: {
src: '<%= concat.dist.dest %>',
dest: 'app/dist/all.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
},
node: true,
predef: ["angular"]
},
gruntfile: {
src: 'Gruntfile.js'
},
lib_test: {
src: ['app/dist/all.js', 'app/js/**/*.js']
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
lib_test: {
files: '<%= jshint.lib_test.src %>',
tasks: ['jshint:lib_test']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['concat', 'jshint', 'uglify']);
};
好了,执行下grunt默认的任务,即concat、jshint、uglify任务,试试看,输入命令:
grunt
如果看到输出的内容包含下面文字,则恭喜你成功了。
Done, without errors.
步骤六:结合grunt和grunt-bower-task进行优化
到目前为止,开发所需的js库终于安装配置完毕了。但思考一下,html页面里需要引用我们自己的js文件以及依赖包里的js、css文件,那将需要编写挺多的代码了,另外还需要将bower_components文件夹与项目一起部署,着实不爽。由于我们已经通过grunt把自己写的js文件合并成一个all.js文件了,所以只需要在html页面引入all.js文件就好了;
为了不将文件夹bower_components与项目一起部署,我们需要复制用到的js、css文件到dist/lib文件夹下,供html页面使用。这一步骤,我们可以通过grunt-bower-task来自动完成。
下面我们来安装grunt的这个插件,执行命令:
npm install grunt-bower-task --save-dev
多一嘴,npm安装的是开发测试所需的js库,bower安装的是项目依赖的js库。
安装完毕后,把grunt-bower-task插件植入。
打开并编辑grunt配置文件Gruntfile.js,加上:
grunt.loadNpmTasks('grunt-bower-task');
bower: { install: { options: { targetDir: 'app/dist/lib', layout: 'byComponent', install: true, verbose: false, cleanTargetDir: false, cleanBowerDir: false, bowerOptions: {} } } }
grunt.registerTask('default', ['concat', 'jshint', 'uglify', 'bower']);
如果不清楚如何安装grunt插件,参考grunt-bower-task的文档。
好了,再执行下grunt默认的任务,即concat、jshint、uglify、bower任务,试试看,输入命令:
grunt
执行成功后,发现在dist/lib文件夹下,我们的jquery、angular、bootstrap都复制过来了。但,等等,我们需要的是bootstrap的css文件,怎么把js文件复制过来了。
打开bower.json并追加下面文字:
"exportsOverride": { "bootstrap": { "": ["dist/css/bootstrap.css", "dist/css/bootstrap.css.map"] } }
再次执行grunt命令,并查看dist/lib/bootstrap文件夹。 这下成功了。可以开始编码了。
步骤七:代码实现
项目源码见:http://git.oschina.net/lazyandroid/public本章项目源码:http://git.oschina.net/lazyandroid/public/commit/b0aa4ba4d4fced6d73b6d88ce2fa9a86b975a788
项目中用到了angular-ui-router,使用下面命令安装:
bower install angular-ui-rou 7fe0 ter --save
copyright = { "作者": "墨衣夜行", "本文链接": "http://my.oschina.net/letao/blog/516057" }
相关文章推荐
- nodejs express框架解决跨越问题
- html5和Css3 的参考手册(中文chm版)
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
- JavaScript 时间特效 显示当前时间
- CSS3 Box-sizing属性以及解决兼容性的一些做法
- phantomjs试玩
- JSON.stringify 语法实例讲解 JSON格式化
- jQuery MiniUI开发系列之:使用API文档
- jQuery MiniUI开发系列之:创建组件对象
- js删除所有子元素
- JS简单限制textarea内输入字符数量的方法
- js 基本类型 引用类型 简单赋值 对象引用 底层原理分析
- 使用Html模版创建详情页面
- 在本地创建angular-ui/bootstrap项目
- javascript基础大全
- 黄聪:jquery.confirm弹出确认消息
- 实现背景图片镜头模糊特效的jQuery插件
- Node.js与Sails ~项目结构与Mvc实现及日志机制
- NSMutableDictionary Class Reference
- jsp实现将动态网页转换成静态页面的方法