设为首页 收藏本站
查看: 1101|回复: 0

[经验分享] 前端工程搭建NodeJs+gulp+bower

[复制链接]

尚未签到

发表于 2017-2-24 09:44:36 | 显示全部楼层 |阅读模式
  需要node、npm的事先安装!!
  1、nodejs安装程序会在环境变量中添加两个变量:
  系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.exe 和npm.cmd,加入path后可以全局调用该命令。
  用户变量中设置:
  path=C:\Users\Administrator\AppData\Roaming\npm
  该目录下node_modules目录用来存放安装的全局的nodejs模块,并在npm目录中生成相应的命令行可执行的文件。而将该路径加入path 是为了全局调用nodejs模块。
  2、npm 简介
  nodejs 安装过程中会自动安装npm,npm  是nodejs的程序包管理工具
  3 、安装git
  git是分布式版本控制系统,现在的开源项目一般都放到公网上的git仓库上,如github(https://github.com/),项目中的使用的依赖包(开源项目)需要使用git从公网仓库中下载到本地。
  windows 平台git 下载地址:http://msysgit.github.io/,安装时下一步就可以 了。 默认安装地址C:\Program Files (x86)\Git,安装完成后,在环境变量path中增加:C:\Program Files (x86)\Git\bin,目的是在cmd窗口中可以引用git命令。
    进入cmd 窗 口:执行命令git --version,显示git版本号,则安装成功

C:\Users\Administrator>git --version
git version 1.9.4.msysgit.2
4.安装bower
  Bower是一个适合Web应用的包管理器,它擅长前端的包管理。
       Bower安装方法:npm install -g bower, -g参数是全局安装,在哪个目录下执行这个命令都行,bower 最终被安装到C:\Users\Administrator\AppData\Roaming\npm\node_modules\(默认情况下)
  使 用bower 可以管理工程中对js类库的依赖,如果程序中依赖jquery ,不需要再到网上下载jquery.min.js了,使用命令 bower install jquery --save,jquery 会动下载到当前目录下的bower_componets目录中了 。
     bower还可以管理js类库之间间依赖,如果需要bootstrap 那么 bower install bootstrap --save,就把bootstrap下载到bower_components目录,同时由就bootstrap依赖于jquery,jquery 也被下载到bower_components目录了。
    上面命令中:bower install bootstrap --save,--save参数是指工程对bootstrap的依赖关系写入bower.json。  (使用bower init 可以交互的方式建立bower.json)。
  bower.json格式:

{
"name": "my-project",//工程名
"version": "1.0.0",//版本号
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {//工程依赖的javascript类库
"<name>": "<version>",
"<name>": "<folder>",
"<name>": "<package>"
},
"devDependencies": {//开发环境依赖包
"<test-framework-name>": "<version>"
}
}
  有了bower.json文件,不需要将bower_componets目录加入版本管理中了。别人使用该项目时,从版本管理系统中检出来,在bower.json 所在目录执行命令 bower install ,那么依赖的javascript类库就自动下载安装到当前目录bower_componets下了。
     bower install bootstrap --save 将bootstrap依赖写入bower.json中的dependencies中
     bower install bootstrap --save-dev  将bootstrap依赖写入bower.json中的dependencies中,还写入devDependencies
  5.安装gulp
  gulp 用于前端项目的构建,如监控程序文件变化,检查js代码正确性,压缩js,源码转换到发布目录,启动web 服务测试等等。
  安装方法:  npm install -g gulp

C:\>npm install -g gulp

  6.建立工程目录结构
   工程的目录结构可以是任意的,没有固定的结构,自已觉得合理就好了。
DSC0000.png
  image :图片目录
  scripts:脚本目录
  styles:css目录
  vender :依赖的第三方javscript类库或css样式库,(最好是把第三方的类库放到一个公共的http地址或引用cdn ,而不是将第三方类库存在本地程序中)
  vender/css:第三方css样式库  
  vender/js:第三方javascript类库
  views :html模版
  index.html:程序入口
  6.安装依赖库 angularjs 和bootstrap
   首先初始化bower.json
   在工程根目录(我是里是web目录)执行命令:

D:\web>bower init
? name: webtest
? version: 0.1.0
? description: 前端测试项目
? main file: ./app/index.html
? what types of modules does this package expose?: globals
? keywords:
? authors: yanlei <java.yanlei@163.com>
? license: MIT
? homepage:
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: No
? would you like to mark this package as private which prevents it from being accidentally pub
{
name: 'webtest',
version: '0.1.0',
authors: [
'yanlei <java.yanlei@163.com>'
],
description: '前端测试项目',
main: './app/index.html',
moduleType: [
'globals'
],
license: 'MIT',
private: true
}
? Looks good?: Yes
D:\web>
  
初始化完成,打开bower.json:

{
"name": "webtest",
"version": "0.1.0",
"authors": [
"yanlei <java.yanlei@163.com>"
],
"description": "前端测试项目",
"main": "./app/index.html",
"moduleType": [
"globals"
],
"license": "MIT",
"private": true
}

  
   安装 angularjs :

D:\web>bower install --save angularjs
bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.3
bower angularjs#*             validate 1.3.3 against git://github.com/angular/bower-angular.git
bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#*
bower angularjs#*              resolve git://github.com/angular/bower-angular.git#*
bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.3.4.
bower angularjs#*              extract archive.tar.gz
bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.3.4
bower angularjs#~1.3.4         install angularjs#1.3.4
angularjs#1.3.4 bower_components\angularjs
     再次打开bower.json:

{
"name": "webtest",
"version": "0.1.0",
"authors": [
"yanlei <java.yanlei@163.com>"
],
"description": "前端测试项目",
"main": "./app/index.html",
"moduleType": [
"globals"
],
"license": "MIT",
"private": true,
"dependencies": {
"angularjs": "~1.3.4"
}
}

    打开web目录看一下:
    
  
DSC0001.jpg

  安装bootstrap:
  
  

D:\web>bower install --save bootstrap
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.1
bower bootstrap#*             validate 3.3.1 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.1
bower jquery#>= 1.9.1         validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.1
bower bootstrap#~3.3.1         install bootstrap#3.3.1
bower jquery#>= 1.9.1          install jquery#2.1.1//jquery也安装了

bootstrap#3.3.1 bower_components\bootstrap//
└── jquery#2.1.1
jquery#2.1.1 bower_components\jquery
     bower.json:
     

{
"name": "webtest",
"version": "0.1.0",
"authors": [
"yanlei <java.yanlei@163.com>"
],
"description": "前端测试项目",
"main": "./app/index.html",
"moduleType": [
"globals"
],
"license": "MIT",
"private": true,
"dependencies": {
"angularjs": "~1.3.4",
"bootstrap": "~3.3.1"
}
}

  
  目录结构:
  
DSC0002.jpg

  7.使用gulp
  在工程根目录(web)下执行gulp命令:

D:\web>gulp
[11:26:39] Local gulp not found in D:\web
[11:26:39] Try running: npm install gulp

  提示本地没有安装gulp ,需要安装,安装之间需要初始化 package.json文件:

D:\web>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (web) webtest //项目名称
version: (1.0.0)  //项目版本
description: 前端测试项目  //说明
entry point: (index.js)  //项目的程序入口
test command: //测试命令
git repository: //项目仓库地址
keywords://关键字 为了别人可以搜索到
author://作者
license: (ISC)//版权
About to write to D:\web\package.json:
{
"name": "webtest",
"version": "1.0.0",
"description": "前端测试项目",
"main": "index.js",
"dependencies": {
"gulp": "^3.8.10"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Is this ok? (yes) yes
  项目根目录下增加了package.json文件。
  安装gulp到本地:

D:\web>npm install gulp
npm WARN package.json webtest@1.0.0 No repository field.
npm WARN package.json webtest@1.0.0 No README data
/

> v8flags@1.0.4 install D:\web\node_modules\gulp\node_modules\v8flags
> node fetch.js
flags for v8 3.14.5.9 cached.
gulp@3.8.10 node_modules\gulp
├── interpret@0.3.8
├── pretty-hrtime@0.2.2
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.0
├── v8flags@1.0.4
├── tildify@1.0.0 (user-home@1.1.0)
├── semver@4.1.0
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0
├── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.1.3)
├── vinyl-fs@0.3.13 (graceful-fs@3.0.4, mkdirp@0.5.0, strip-bom@1.0.0, defaults@1.0.0, vinyl@0.4
└── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, lodash@2.4.1, vinyl@0.4.5, t

  执行gulp命令时,提示:

D:\web>gulp
[11:32:32] No gulpfile found

  gulp执行需要gulpfile.js ,该 文件里定义了需要执行的任务。 可以手动建一个:
  gulpfile.js

var gulp = require('gulp');
browserSync = require('browser-sync');
// Start the server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./app"
}
});
});
// 将bower的库文件对应到指定位置
gulp.task('refBowerComponents',function() {
gulp.src('./bower_components/angularjs/angular.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/angularjs/angular.min.js.map')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/jquery/dist/jquery.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/jquery/dist/jquery.min.map')
.pipe(gulp.dest('./app/vender/js'));
//css
gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
.pipe(gulp.dest('./app/vender/css/'));
});
// Compile SASS & auto-inject into browsers
gulp.task('sass', function () {
return gulp.src('./app/sass/*.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('./app/styles/style.css'))
.pipe(browserSync.reload({stream:true}));
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
var files = [
'./app/*.html',
'./app/images/**/*.*',
'./app/views/**/*.html',
'./app/scripts/**/*.js',
'./app/styles/**/*.css'
];
// Watch scss AND html files, doing different things with each.
gulp.task('default', ['browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch(files, ['bs-reload']);
});

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346456-1-1.html 上篇帖子: nodejs模块发布及命令行程序开发 下篇帖子: NodeJS写日志_Log4js使用详解
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表