nodejs前端自动化构建环境的搭建-创新互联

为了UED前端团队更好的协作开发同时提高项目编码质量，我们需要将Web前端使用工程化方式构建；

目前需要一些简单的功能：

   1. 版本控制
    2. 检查JS
    3. 图片合并
    4. 压缩CSS
    5. 压缩JS
    6. 编译SASS

这些都是每个Web项目在构建、开发阶段需要做的事情。前端自动化构建环境可以把这些重复工作一次配置，多次重复执行，极大的提高开发效率。

目前最知名的构建工具： Gulp、Grunt、NPM + Webpack；
    grunt是前端工程化的先驱

   gulp更自然基于流的方式连接任务

   Webpack最年轻，擅长用于依赖管理，配置稍较复杂

   推荐使用Gulp，Gulp基于nodejs中stream，效率更好语法更自然,不需要编写复杂的配置文件

Use Gulp to automate front-end build tasks

Gulp是基于 Node.js的，需要要安装 Node.js

1、为了确保依赖环境正确，我们先执行几个简单的命令检查。
    node -v
    Node是一个基于Chrome JavaScript V8引擎建立的一个解释器
    检测Node是否已经安装，如果正确安装的话你会看到所安装的Node的版本号

2、接下来看看npm，它是 node 的包管理工具，可以利用它安装 gulp 所需的包
    npm -v
    这同样能得到npm的版本号，装 Node 时已经自动安装了npm

3、开始安装Gulp

    npm install -g gulp


   全局安装 gulp

    gulp -v


   得到gulp的版本号，确认安装成功

基础安装结束
-

4、切换到你的在项目根文件夹下，运行

    npm install gulp --save-dev//将具体的gulp功能插件局部安装项目下

5、安装gulp功能插件依赖包

    npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev

gulp功能模块的文件会放在项目所在的目录的./node_modules 下

6、我们目前先使用一些简单的功能：
    - 检查Javascript
    - 编译Sass文件
    - 合并Javascript
    - 压缩合并并重命名Javascript

新建gulpfile.js 配置文件放在项目根目录下
 演示项目目录结构

testProject    (项目名称)
  |–.git       通过git进行版本控制,项目自动生成这个文件
  |–node_modules   组件包目录
  |–dist       **发布环境**（编译自动生成的）
    |–css     样式文件(style.css style.min.css)
    |–images   图片文件(压缩图片\合并后的图片)
    |–js     js文件(main.js main.min.js)
    |–index.html 静态页面文件(压缩html)
  |–src       **开发环境**
    |–sass        sass文件
    |–images        图片文件
    |–js         js文件
    |–index.html     静态文件
  |–gulpfile.js       gulp配置文件
  |–package.json       依赖模块json文件,在项目目录下npm install会安装项目所有的依赖模块，简化项目的安装程序

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。