前端工程的研究

前端工程的研究 泰和网

为什么要前端自动化

什么是前端自动化构建就不说了，应为我不是写书的。在前端开发实践中，大公司都会有自己的基础前端架构，能容包括了开发环境、代码管理，代码质量，性能检测，命令行工具，开发规范，开发流程，前端架构及性能优化。相对而言，小公司或则是创业型的公司，前端架构这块做得就相对没有这么好，甚至于很不规范，而规范的目的在于提升工作效率。

而规范需要一定的过程，我们就先从代码质量，代码管理上入手。

1. 对代码（html，css，js）进行语法检查
2. 对图片，代码进行压缩
3. 对sass。less 的css预处理器进行编译
4. 期望代码有改动后，能自动刷新页面
5. ...

这些操作，我们可以通过人工来完成，但是效率真的低到没朋友，难道语法检查你要自己一行一行的review，或则是拜托你的同事帮你一行一行的 review 么。如果你让我做这个，我肯定和你绝交...但是 review 的目的是帮助我们写出高质量的代码。这是必不可少的，所以我们期望能有一个自动帮我们实现代码检测压缩的工具。只要一个命令，你就能轻松的实现代码压缩，图片压缩，css预处理器编译等原来需要你去人工完成的任务，是不是爽到爆炸。

在项目自动化构建工具中，大家用得比较多的，分别是grunt，gulp。与这些自动化工具配套的包管理工具呢，通常还有npm。node包含了npm的包，所以只要你的系统里安装的 node，你就可以在你的控制台里通过 npm install 来安装你的项目依赖。还有的就是最近流行起来的 webpack 模块管理工具,大家对webpack 的反应也很好，所以我们打算在项目开发的时候把 gulp 和 webpack 一起用起来，并把研究后的搭建流程写成教程。这次分享的是gulp的搭建，下次等我的后台项目开始用 webpack 的时候，再来分享一篇。

从零开始搭建 gulp 前端自动化

1. 安装node.js
2. npm init 生成package文件，或则你可以自己手动生成
3. 在控制台中输入npm install --save-dev gulp命令，在项目中安装gulp
4. 配置gulp任务
   

    
   
   var gulp = require('gulp'); 
   
   gulp.task('default',function(){ 
   
       console.log("hello") 
   
   }); 
   
   

5. 在控制台中输入 gulp或则gulp default测试你的gulp任务

6. 配置你真正需要的 gulp 任务，（压缩，代码质量检查，浏览器自动刷新）

   浏览器自动刷新

   在你的谷歌浏览器里安装插件。关键字livereload 
   通过命令mpn install gulp-livereload --save-dev来安装依赖
   在gulp文件中引入livereload = require('gulp-livereload'),
   在gulp的watch任务中通过 livereload.listen([options])启动刷新服务 
   
   5.定义的任务在最后加入一个工作流.pipe(livereload()),
   在启动后进入到这个任务后，开启谷歌插件，就能自动刷新浏览器了
   gulpfile.js 文件
   
   var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   livereload = require('gulp-livereload'),
   
   gulp.task('test',function() {
       return gulp.src('js/test.js')
           .pipe(uglify())
           .pipe(gulp.dest('build'))
           .pipe(livereload())
   });
   
   gulp.task('watch',function(){
       livereload.listen();
       gulp.watch('js/test.js', ['test']);
   });
   
   当你修改你的test.js 文件之后，ctrl + s 保存，你就可以看到时时刷新。
   
   
   

7. 代码压缩

   通过命令mpn install gulp-uglify --save-dev来安装依赖(js 压缩)
   通过命令mpn install gulp-concat --save-dev来安装依赖(合并压缩后的文件到一个文件)
   gulpfile.js 文件
   
   uglify = require('gulp-uglify'),
   
   gulp.task('compress',function(){
   return gulp.src('js/servers/*.js')
       .pipe(uglify())
       .pipe(concat('all.js'))
       .pipe(gulp.dest('dist/js'))
       .pipe(livereload())
   });
   

8. 同理css压缩，生成雪碧图等task，代码质量检查，都是同样的先安装依赖，再引用，编写task

如果你想深入学习

我理想中的前端工作流
gulp 中文网
livereload
gulp-livereload
使用gulp构建的小白工具