前端开发自动化

2018-01-29 07:21:59 Javascript 2228 0

前言

一个完整的开发流程

本地开发环境的初始化
第三方依赖的管理
源文件编译
自动化测试
发布到pipeline和各个环境

现代的开发流程，就是要使上面的各个部分都可以自动化，一个命令就可以使这些流程都自动走完，并且快速的得到错误或通过的反馈，让我们可以方便快速的修复错误和发布版本

常用功能

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

要实现上面的功能，我们就需要一款自动化工具，本文主要介绍基于 Gulp 实现部分自动化构建

Gulp

安装

初始要求 nodeJS 环境
然后我们可以通过npm来安装我们所需的工具了

npm install --global gulp

然后你需要在项目根目录创建 gulpfile.js 与 package.json 文件作为一个初学者，建议你直接复制我放github上的package.json文件到你新建的 package.json
接着命令行进入项目根目录，运行命令

npm install

使用

接下来的 gulpfile.js 的配置与 gulp 的使用方法你看我代码中的注释就好

var gulp = require('gulp');
// 执行shell脚本
var shell = require('shelljs');
// 预编译模块的方案【前端模块，都得预编译】
var browserify = require('browserify');
// 文件处理
var fs = require('fs');
// 用于顺序执行任务
var sequence = require('run-sequence');
// 监听文件变化
var watchify = require('watchify');
// 合并文件
var concat = require('gulp-concat');
// 浏览器同步热更新
var browserSync = require('browser-sync').create();


// ----------------------------------------------------
// SCSS
// ----------------------------------------------------
var sass = require('gulp-sass'); // 实现编译
var autoprefixer = require('gulp-autoprefixer'); // 补全浏览器兼容的css
var cssmin = require('gulp-clean-css'); // 压缩css

// ----------------------------------------------------
// JS
// ----------------------------------------------------
var babel = require("gulp-babel"); // es6转es5
var uglify = require('gulp-uglify'); // 压缩js
var jshint = require('gulp-jshint'); // 校验js的工具
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require("gulp-sourcemaps");
// ----------------------------------------------------

// 这个 task 负责调用其他 task 
// 在根目录可以通过命令行只输出 gulp 执行该任务
gulp.task('default', function () {
  // 顺序执行指定任务
  sequence('start');
});



//++++++++++++++++++++++++++++++++++++++++++++++++++++
//      SCSS
//++++++++++++++++++++++++++++++++++++++++++++++++++++
var scss_src = '__materials/assets/scss/*.scss'; 
var css_dst_dir = 'public/static/css';
// SCSS 编译与压缩 
gulp.task('compile_scss', function () {
  return gulp.src(scss_src) // 按当前规则匹配到的 所有 scss 文件，每次顺序处理一个scss文件
    .pipe(sass()) // 编译的当前的 scss 文件 为 css
    .pipe(autoprefixer({ // 将刚刚编译的结果，补全 css 浏览器兼容前缀
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(cssmin()) // 将生成的css进行压缩
    .pipe(gulp.dest(css_dst_dir)); // 存放到对应目录下的相应名称的文件中
});


//++++++++++++++++++++++++++++++++++++++++++++++++++++
//      JS 编成es5
//++++++++++++++++++++++++++++++++++++++++++++++++++++
var js_assets_dir = '__materials/assets/js/'; // __materials/assets 目录，别人通过浏览器不可访问
var js_es6_src = js_assets_dir + 'es6/**/*.js'; // 书写的es6文件
var js_es5_dir = js_assets_dir + 'es5'; // 编译成浏览器兼容前的临时区
var js_path = 'public/static/js';
// var js_dst_dir = 'public/static/js';
gulp.task('compile_js', function () {
  gulp.src(js_es6_src)
    .pipe(jshint()) // 检测书写的代码，语法是否有问题，如果有，会输出到命令行
    .pipe(jshint.reporter('default'))
    .pipe(babel()) // es6转es5
    .pipe(gulp.dest(js_es5_dir)); // 存放到对应目录下的相应名称的文件中，如 es6/module/index.js 会存到 es5/module/index.js
});


//++++++++++++++++++++++++++++++++++++++++++++++++++++
//      Browserify es5模块编译到正式环境
//++++++++++++++++++++++++++++++++++++++++++++++++++++
gulp.task("browserify", function () {
  // 需要打包的文件目录
  var entiryFiles = [
    js_es5_dir + '/mobile/mobile.js', // 会将文件里 require语法引入的文件，包含的所内容打包到一个文件里面
  ];

  entiryFiles.map(function (entry) {
    var _temp_arr = entry.split("/");
    var file_name = _temp_arr[_temp_arr.length - 1];
    return browserify({ entries: [entry] })
      .bundle()
      .pipe(source(file_name)) // 存储时的对应层级与文件名
      .pipe(buffer())
      .pipe(uglify())
      .pipe(gulp.dest(js_path)); // 打包到用户可以通过浏览器访问的目录
  });

});

//++++++++++++++++++++++++++++++++++++++++++++++++++++
//  监听对应目录所有文件的变化，如果变化， 则执行任务
//++++++++++++++++++++++++++++++++++++++++++++++++++++
gulp.task('watch', function () {
  gulp.watch(scss_src, ['compile_scss']); // 观察匹配到的文件是否有变化，如果变化，则会执行 gulp的task：compile_scss
  gulp.watch(js_es6_src, function () {
    sequence('compile_js', 'browserify'); // 观察匹配到的文件是否有变化，如果变化，则会顺序执行gulp的task：compile_js与browserify
  });
});

// ----------------------------------------------------
// 在根目录可以通过命令行输出 gulp start 执行该任务
gulp.task('start', function () {
  sequence('compile_scss', 'compile_js', 'browserify', 'watch');
});

注意，如果你用得上babel的时候，还要在项目根目录新建一个文件.babelrc，内容如下