基于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任务处双击即可