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写的一个简单项目打包工具
May 11 NodeJs
nodejs获取本机内网和外网ip地址的实现代码
Jun 01 NodeJs
NodeJS学习笔记之网络编程
Aug 03 NodeJs
NodeJs基本语法和类型
Feb 13 NodeJs
nodejs初步体验篇
Nov 23 NodeJs
深入浅析Nodejs的Http模块
Jun 20 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
nodejs密码加密中生成随机数的实例代码
Jul 17 NodeJs
nodejs异步编程基础之回调函数用法分析
Dec 26 NodeJs
深入理解nodejs搭建静态服务器(实现命令行)
Feb 05 NodeJs
NodeJS有难度的面试题(能答对几个)
Oct 09 NodeJs
一文秒懂nodejs中的异步编程
Jan 28 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
django输出html内容的实例
2018/05/27 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python pymysql库的常用操作
2020/10/16 Python
new修饰符是起什么作用
2015/06/28 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
为什么需要版本控制?
2013/08/08 面试题
历史系毕业生自荐信
2013/10/28 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书