node package manager

webpack-avalon

安装相关步骤

  1. 下载nodejs
  2. 淘宝镜像设置(cmd):npm config set registry https://registry.npm.taobao.org
  3. 下载本DEMO
  4. 安装该DEMO的包依赖
    • 全局安装(仅第一次安装时)

      • 安装包:npm install -g node-dev koa koa-router koa-static colors koa-webpack-dev-middleware koa-proxy gulp gulp-ejs gulp-csslint gulp-csso gulp-jshint gulp-uglify gulp-rename gulp-notify gulp-replace vinyl-buffer gulp-imagemin imagemin-pngquant merge-stream gulp.spritesmith del gulp-cssnano mockjs webpack extract-text-webpack-plugin text-loader url-loader style-loader css-loader less-loader sass-loader require-css-preloader autoprefixer-loader
      • 注意:因为网络原因node-sass可能会安装失败,失败后请修改node_modules/node-sass/lib/extensions.js里getBinaryUrl函数的返回值为 "return ['https://github.com/sass/node-sass/releases/download', sass.binaryName].join('/');"
    • 切换到项目(cmd):npm link xxx(上面安装的除node-dev外的所有包)

    • 如果出现xxx不是可执行命令

      • 安装该插件到全局:npm install -g xxx
      • 设置环境变量:
        • 将"C:\Users\i\AppData\Roaming\npm"添加到你的环境变量PATH下
        • 注意:其中i表示你电脑用户名,需要根据你自己的名字变更

文件目录结构约定

  • src/views:存放页面模块,并且每个模块必须有一个和模块同名的.html以及一个入口app.js
  • src/components:存放通用模块(例如header/footer/common)
  • src/vendor:存放第三方文件
  • 为避免图片命名冲突,每个模块下的图片请使用模块名前缀,例如:index-img

名词解释

  • 模块:每个模块下可包含自己的css/js/tpl/img等资源文件
  • 模拟请求:需要在mock/定义数据,routes.js定义路由
  • 别名配置:config.js下的alias
  • 请求地址切换:config.js下curl

常用命令

  • npm start:开启本地服务
  • npm run watch:监控本地html和sprite图片合并
  • npm run build:生成build文件
  • npm run replace:build后压缩(生成.min文件和替换html的引用地址)
  • npm run sprite:图片合并

使用说明

  • 当开始一个项目时,首先在src/views下新建好模块

    • 例如:你有一个三个页面的项目,你需要建立(为避免重复,xxx.html必须和模块名一致)
    • src/views/page1/
      • page1.html # 需要引入common.js + page1.js + common.css + page1.css
      • app.js # require你本页的js和css
      • css/xx.css
      • js/xx.js
      • 详情参考示例里的mod模板页
    • page2 ...
    • page3 ...
  • 如果你需要使用图片合并,请将需要合并的文件放在"img/sprite/"下

  • 如果你需要使用ejs复用通用页面模板:<%- include mod.html %>

  • 然后在命令行分别启动npm start和npm run watch,成功后可以开始开发了(注意需要先建好模块页面)

  • 你可以直接在项目里使用,less或sass

  • 建议使用chrome浏览器进行开发,并且安装livereload插件,你将不再需要F5