搭建一个自动化构建的Web前端项目_web前端代码自动生成

Node简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Browsersync是浏览器同步测试工具，Browsersync能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面。省去手动F5的事件，更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。即在任何一设备上操作，其他设备也随之改变，大大提高了测试效率。

Gulp是一款前端自动化构建工具，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

1、本地新建项目名

本地新建项目为MannyLiu，用开发工具打开。

2、Node安装，已安装的略过该步

node --version命令检测是否安装Node，正常显示版本号则已安装。

否则为未安装，未安装的，先安装node，安装教程：http://www.runoob.com/nodejs/nodejs-install-setup.html

3、创建Node应用

使用 Node.js 时，我们不仅仅 在实现一个应用，同时还实现了整个 HTTP 服务器。事实上，我们的 Web 应用以及对应的 Web 服务器基本上是一样的。

在我们创建 Node.js 第一个 “Hello, World!” 应用前，让我们先了解下 Node.js 应用是由哪几部分组成的：

1. 引入 required 模块：我们可以使用 require 指令来载入 Node.js 模块。

2. 创建服务器：服务器可以监听客户端的请求，类似于 Apache 、Nginx 等 HTTP 服务器。

3. 接收请求与响应请求 服务器很容易创建，客户端可以使用浏览器或终端发送 HTTP 请求，服务器接收请求后返回响应数据。

3.1 文件根目录下创建一个server.js文件。

3.2 引入 required 模块

使用 require 指令来载入 http 模块，并将实例化的 HTTP 赋值给变量 http

var http = require("http");
1

3.3 建服务器

使用 http.createServer() 方法创建服务器，并使用 listen 方法绑定 8888 端口。 函数通过 request, response 参数来接收和响应数据。

var PORT = 8888;//监听端口
http.createServer(function (request,response) {
   
   
     发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead('200',{
   'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(PORT);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:' + PORT +'/');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

以上代码完成了一个可以工作的 HTTP 服务器。

使用 node 命令执行以上的代码：

node server.js
1

打开浏览器访问 http://127.0.0.1:8888/，会看到一个写着 "Hello World"的网页。

4、NPM安装模块

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

4.1 package.json文件创建

项目依赖的模块可以单个安装，也可以批量安装。单个安装不做介绍，程序员嘛，能批量的尽量批量，不能批量的创造条件也要批量。批量安装就是使用package.josn文件，将项目需要的模块配置好，使用npm install命令即可批量安装。package.json 位于模块的目录下，用于定义包的属性。
文件创建有多种方式：

• 手动创建
• npm init命令自动创建

此处介绍自动创建：

1. 输入命令 npm init
2. 根据需要填写相关信息
   
3. 再提示是否创建处输入yes，即可自动创建。刷新项目，可见生成的文件。
   

4.2 package.json文件中添加项目依赖的模块

package.json文件中的dependencies 属性中添加依赖的模块。其他属性暂不做说明。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
本次Demo中依赖的模块有autoprefixer、gulp、browser-sync。在文件中添加以下依赖模块信息：

 "dependencies": {
    "autoprefixer": "^6.5.4",
    "browser-sync": "^2.18.5",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0",
    "gulp-clean": "^0.3.2",
    "gulp-cssnano": "^2.1.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-less": "^3.3.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^4.3.11",
    "gulp.spritesmith": "^6.2.1"
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

完成后运行命令 npm install进行批量安装，稍微等待，安装需要一点时间，安装成功后，项目下会自动创建node_modules文件，存放依赖的模块。并且自动生成package-lock.json文件，作用是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。

5、配置Gulp

5.1 项目根目录下创建gulpfile.js

5.2 gulp配置

正在系统学习中，理论知识暂时写不出123来，只能解释代码作用。。。

1. 用require引入需要的模块

var path            = require('path');
var gulp            = require('gulp');
var plumber         = require('gulp-plumber'),
    uglify          = require('gulp-uglify'),
    rename          = require('gulp-rename'),
    less            = require('gulp-less'),
    postcss         = require('gulp-postcss'),
    cssnano         = require('gulp-cssnano'),
    autoprefixer    = require('autoprefixer'),
    spritesmith     = require('gulp.spritesmith'),
    imagemin        = require('gulp-imagemin');
1
2
3
4
5
6
7
8
9
10
11

2. 配置js，less，images的自动打包路径，配置前需要定义项目的目录结构
   本次Demo的目录结构：
   MannyLiu
   –dist：打包后的资源文件
   –examples：页面
   –src：开发中的资源
   –src/images：图片
   –src/js：js
   –src/less：less样式文件

//默认配置
var       BRANCH = __dirname;//BRANCH：当前目录
var globalOption = {
   };

globalOption.res = {
   
    src: {
   
        jssrc: path.join(BRANCH, 'src/js'),
        lesssrc: path.join(BRANCH, 'src/less'),
        imagesrc: path.join(BRANCH<
1
2
3
4
5
6
7
8
9
10
11