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中转换URL字符串与查询字符串详解
Nov 26 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
nodejs开发——express路由与中间件
Mar 24 NodeJs
NodeJS基础API搭建服务器详细过程记录
Apr 01 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 NodeJs
Windows下快速搭建NodeJS本地服务器的步骤
Aug 09 NodeJs
详解Nodejs 通过 fs.createWriteStream 保存文件
Oct 10 NodeJs
nodejs调取微信收货地址的方法
Dec 20 NodeJs
NodeJS父进程与子进程资源共享原理与实现方法
Mar 16 NodeJs
nodeJS模块简单用法示例
Apr 21 NodeJs
详解Nodejs内存治理
May 13 NodeJs
nodejs对项目下所有空文件夹创建gitkeep的方法
Aug 02 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 函数学习简单小结
2010/07/08 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js查错流程归纳
2012/05/04 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
python paramiko实现ssh远程访问的方法
2013/12/03 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python实现把类当做字典来访问
2019/12/16 Python
python 命名规范知识点汇总
2020/02/14 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
python Cartopy的基础使用详解
2020/11/01 Python
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
公司总经理工作职责管理办法
2014/02/28 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
消防演习通知
2015/04/25 职场文书