介绍

这是一个gulp的前端开发工具，使用browserify编译js，实现多个页面多个入口分别打包输出以及本地开发时修改资源实时编译。

生成项目

$ mkapp

终端中输入以上命令生成项目结构

项目结构

- /app
--- /build 存放所有的task
--- /config 设置一些路径
--- /res 生成的资源存放处
--- /src 开发目录
------ /lib   存放一些js依赖
------ /public   存放公共的样式，图片
--------- /css   最终会编译成base-[hash].css存放在res/public/css目录中
--------- /img   最终会变异成img-[hash]的图片存放在res/public/img目录中
--------- /swf   
--------- /media   
------ /components   可以存放一些复用的模块
------ /store  存放状态数据
------ /view  页面
--------- /index
------------- /css
------------- /img
------------- /js
------------- /swf
------------- /media
------------- index.html
------------- index.js
--------- /subpage
------------- /css
------------- /img
------------- /js
------------- /swf
------------- /media
------------- index.html
------------- index.js
----- /WEB-INF 生成的html文件
----- gulpfile.js
----- package.json

使用

命令

安装依赖

npm install

本地启动（不启动本地服务）

npm run dev

本地启动（browsersync启动，可以模拟数据接口）

npm run start

打包

npm run build

页面

每一个页面都会在src/view 中创建一个文件夹，包括 :

-- /css 样式(可选)
-- /img 图片(可选)
-- /js js(可选)
-- /swf flash文件(可选)
-- /media 媒体文件(可选)
-- index.html 页面模板
-- index.js 入口文件

package.json

config

srcDir: 资源源代码目录

resDir: 资源生成目录

ftlDir: 生成模板路径

ftlext: 模板后缀名

resPath: 资源引用路径

prefix: 模板名前缀 

xwebResUrl: 内网资源路径

设置模块别名

在使用commonjs的方式加载模块时， 可能会遇到经常使用的模块， 比如:jquery，这样可以给模块添加别名，例如：

require('../lib/jquery')  =>  require('jquery')

方法： 在package.json文件中 "browser" 字段中添加别名即可

例如：

"browser": {
  "jquery": "./src/lib/jquery.min.js"
}

key为别名， value为模块的相对路径

shim

我们经常会使用jquery的插件，但是又需要依赖jquery，这样我们就需要shim来组合jquery和jquery的插件

使用方法:

"browser": {
    "jquery": "./src/lib/jquery.min.js",
    "blockUI": "./src/lib/jquery.blockUI.min.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "blockUI" : { "depends": ["jquery:jQuery"] }
  },

在package.json中， 找到browserify-shim这个字段， 添加依赖，就上例中的blockUI, "depends" 为依赖， 他依赖了jquery,:jQuery为传入的的值

文件夹名称为最终生成的模板文件名

commonJS

使用browserify打包js文件，会将js文件最终合并打包

模板引擎

添加ejs模板，可在js文件中直接require 例如：

a.html

<div>
<% if(show){ %>
hellow world!
<% } %>
</div>

app.js

var tmp = require('a.html');
document.body.innerHTML = tmp({show: true});

browsersync

介绍

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

使用 browsersync 启动本地服务，添加本地数据模拟；

示例：

$.get('/api/login.htm', function(data){
    // do something
}, 'json');

api目录：

----- /api
--------- login.htm

login.htm

{
  "errorCode": "0"
}

新增sass

webpack

启动

npm run start / yarn start // 本地服务启动，hot replace

npm run dev / yarn dev // 本地启动，不启动服务

npm run build / yarn build // 打包