基于node前端开发环境搭建

依赖

nodejs/npm

安装

windows

nodejs官网  下载安装即可, 安装教程以及环境变量配置可以参见 这里

osx

系统内置不需要额外安装

使用

cottage针对单站点项目和多站点项目提供了两个命令来进行初始化

1.对于单站点项目，项目下全部资源模板发布至同一站点，

在项目父级目录执行

cottage root

目录结构为：

└── 项目 ├── static | └── public ├── template ├── images ├── gulpfile.js └── config.json

2.对于多站点项目，项目下需要针对不同站点单独建立相应的文件夹，

在站点父级目录执行

cottage + 站点名称

目录结构为：

└── 项目 └── 站点名称1_site ├── static | └── public ├── template ├── images ├── gulpfile.js └── config.json

gulp及其任务依赖

1.gulp

首先需要全局安装gulp

安装

npm  install  -g gulp

2.gulp任务依赖

安装

保存 package.json 到工作空间中，这里我的工作是/Users/msx/Sites

在该目录下执行  npm  install  即可安装package中依赖的全部插件

也可以直接下载包含全部依赖的 node modules压缩包

{ "name" : "trs-gulp-project" , --工程名称 "version" : "0.1.0" , --版本 "description" : "plugins depends on" , --描述 "devDependencies" : { --依赖 "browser-sync" : "^2.11.2" , --浏览器预览 "browsersync-ssi" : "^0.2.4" , "gulp" : "~3.8.8" , --本地gulp "gulp-autoprefixer" : "^3.1.0" , --css前缀自动补全 "gulp-clean" : "^0.3.1" , --文件清理 "gulp-concat" : "^2.5.2" , --文件合并 "gulp-copy" : "0.0.2" , --文件复制 "gulp-csscomb" : "^3.0.7" , --css顺序调整 "gulp-csslint" : "^0.3.0" , --css检查 "gulp-csso" : "^1.1.0" , --css压缩 "gulp-file-include" : "^0.13.7" , --shtml include "gulp-if" : "^2.0.0" , --变量判断 "gulp-imagemin" : "^2.2.1" , --图片压缩 "gulp-jshint" : "^2.0.0" , --js检查 "gulp-processhtml" : "^1.1.0" , --html引用替换 "gulp-rename" : "^1.2.0" , --文件重命名 "gulp-shell" : "^0.5.2" , --调用shell "gulp-template" : "^3.1.0" , --html内容替换 "gulp-uglify" : "^1.1.0" , --js压缩 "gulp-watch" : "^4.3.5" , --js压缩 "gulp-zip" : "^2.0.3" , --zip打包 "imagemin-pngquant" : "^4.0.0" , --图片压缩 "jshint" : "^2.9.1" , --js检查 "path" : "^0.12.7" , --引用路径 "through-gulp" : "^0.5.0" , --读/写流 "through2" : "^2.0.1" "ssi" : "^0.3.0" --Server Side Include } }

每个gulp任务都有相应的node modules依赖，由于我们在不同项目中将会使用到的modules基本一致，所以共用的工作空间下的node modules

如果你不想在工作空间根目录下存放,也可以在其他目录单独存放，并将存放目录添加进环境变量即可

环境变量

单独存放的话把package.json保存在buildReply目录下，并执行  npm  install

osx

在执行gulp命令前设置环境变量  export  NODE_PATH = "/Users/msx/Sites/gulpReply/node_modules"

或者将gulpReply添加进当前用户环境变量

windows

系统-->高级设置-->环境变量

将安装node modules的位置添追加至系统环境变量NODE_PATH

使用

gulp + 任务名  运行响应的gulp任务

构建中提供的任务如下：

gulp build --env dev ---测试环境模板打包gulp build --env pro ---生产环境模板打包gulp debug ---本地调试gulp jstask ---js文件检查gulp jstask --file 文件名 ---检查js文件gulp csstask ---css文件检查gulp csstask --file 文件名 ---检查css文件gulp imagemin ---图片压缩

或者使用webStorm来查看和调用gulp命令

载入项目后，在项目中gulpfile.js右键--show gulp tasks

执行命令时，在gulp任务处双击即可