nodejs前端自动化构建环境的搭建


Posted in NodeJs onJuly 26, 2017

为了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会安装项目所有的依赖模块,简化项目的安装程序

现在,项目文件夹都建好,组件也安装完毕了,我们需要编写gulpfile.js文件以指定gulp需要为我们完成什么任务。
    gulpfile.js内容如下:

// 引入gulp
  var gulp = require('gulp');

  // 引入组件
  var jshint = require('gulp-jshint');//检查js
  var sass  = require('gulp-sass');  //编译Sass
  var concat = require('gulp-concat');//合并
  var uglify = require('gulp-uglify');//uglify 组件(用于压缩 JS)
  var rename = require('gulp-rename');//重命名

  // 检查js脚本的任务
  gulp.task('lint', function() {
    gulp.src('./js/*.js') //可配置你需要检查脚本的具体名字。
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
  });

  // 编译Sass
  gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'));//dest()写入文件
  });

  // 合并,压缩js文件
  // 找到 js/ 目录下的所有 js 文件,压缩,重命名,最后将处理完成的js存放在 dist/js/ 目录下
  gulp.task('scripts', function() {
    gulp.src('./js/*.js')
      .pipe(concat('all.js'))
      .pipe(gulp.dest('./dist'))
      .pipe(rename('all.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('./dist'));

      console.log('gulp task is done');//自定义提醒信息
  });

  .... // 其他任务类似

  // 定义默认任务,执行gulp会自动执行的任务
  gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听js文件变化,当文件发生变化后会自动执行任务
    gulp.watch('./js/*.js', function(){
      gulp.run('lint','scripts');
    });
  });

7、现在,回到命令行窗口,可以直接运行gulp任务了。
    gulp

    这将执行定义的default任务,就和以下的命令式同一个意思

    gulp default

    当然,我们可以运行在gulpfile.js中定义的任意任务,比如,现在单独运行sass任务:

    gulp sass

8、编译会显示Finished,如果你的JS有什么不好的地方它会提醒,避免一些不必要的错误,十分贴心

    常见提醒:

    1.禁止在同一行声明多个变量。
    2.请使用 ===/!==来比较true/false或者数值
    3.使用对象字面量替代new Array这种形式
    4.不要使用全局函数。
    5.Switch语句必须带有default分支
    6.函数不应该有时候有返回值,有时候没有返回值。
    7.For循环必须使用大括号
    8.If语句必须使用大括号
    9.for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染。

9、gulp的插件数量很多,后面还可以根据自己的需要进行添加任务

    常用的gulp插件参考

    gulp-imagemin:         压缩图片
    gulp-ruby-sass:     支持sass,安装此版本需要安装ruby
    gulp-minify-css:     压缩css
    gulp-jshint:          检查js
    gulp-uglify:          压缩js
    gulp-concat:        合并文件
    gulp-rename:          重命名文件
    gulp-htmlmin:         压缩html
    gulp-clean:          清空文件夹
    gulp-livereload:     服务器控制客户端同步刷新(需配合chrome插件LiveReload及tiny-lr)

Use Git as a project management tool
安装git, 下载安装包会安装好 Git Shell 和可视化环境

    http://git-scm.com/download/win

配置用户名:

    git config --global user.name "Your Name"
    git config --global user.email "email@example.com"

关联一个到团队的库

    git remote add origin git@github.com:markyun/My-blog.git

添加文件到仓库,添加全部文件用 . 表示

    git add .

把文件提交到仓库

    git commit -m " first add project file"

提交文件到团队仓库

    git push -u origin master //将本地的项目提交到远程仓库中。

以上就完成了前端团队最基本的开发环境搭建和代码提交工作流程。

补充:ZSmart UED Team 的前端开发软件环境 (Windows, Linux, Mac OS X)
    安装Node.Js、NPM、Ruby、Java 基础环境
    Sublime Text3 + 插件           用于编写前端代码
    Google chrome 、Mozilla Firefox + Firebug
    Internet Explorer             进行兼容测试和预览页面UI、动画效果和交互功能
    Node.js+Gulp                 进行前端自动化构建、JS语法验证、CSS压缩,图片压缩等;
    Koala                         实时编译Less、Sass、Compass、CoffeeScript;
    Github                         存储自己的代码库 、git或SVN用于版本控制和团队Code Review
    Tomcat、DedeAMPZ、MAMP      进行简单运行环境演示
    Photoshop CC 切图 + Sprites 合并小图标
    XMind                         画出清晰的工作或业务逻辑思维图

(未完待续...)

NodeJs 相关文章推荐
基于NodeJS的前后端分离的思考与实践(五)多终端适配
Sep 26 NodeJs
nodejs中使用多线程编程的方法实例
Mar 24 NodeJs
Nodejs学习笔记之入门篇
Apr 16 NodeJs
windows下安装nodejs及框架express
Aug 07 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
基于nodejs+express4.X实现文件下载的实例代码
Jul 13 NodeJs
Mac 安装 nodejs方法(图文详细步骤)
Oct 30 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
Jun 24 NodeJs
浅谈vue websocket nodeJS 进行实时通信踩到的坑
Sep 22 NodeJs
nodejs body-parser 解析post数据实例
Jul 26 #NodeJs
深入解析nodejs HTTP服务
Jul 25 #NodeJs
NodeJS使用七牛云存储上传文件的方法
Jul 24 #NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
Jul 18 #NodeJs
nodejs密码加密中生成随机数的实例代码
Jul 17 #NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
Jul 14 #NodeJs
基于nodejs+express4.X实现文件下载的实例代码
Jul 13 #NodeJs
You might like
PHP网站基础优化方法小结
2008/09/29 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP session 会话处理函数
2016/06/06 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
使用TensorFlow实现SVM
2018/09/06 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
django框架创建应用操作示例
2019/09/26 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
国庆节文艺活动方案
2014/02/03 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技