react学习总结5--构建工具 Gulp、Browserify（一）

react 学习总结–构建工具Gulp、Browserify（一）

说明

关于构建工具，以前只用过 fis（使用的很基础），入职新公司，前端只有我一个人，所以只能自己学 gulp 了，各种插件都是去 这里 查看文档，按照文档一点一点试出来的。学习期间，感觉像我这样的新手，最需要的还是一个中小型项目的完整目录结构，然后根据目录结构去配置gulpfile.js，可惜，博客和GitHub上有很多讲解的很详细的gulp配置文章，但是，由于技术选型不同，不能够通用，所以还是自己配，由于感觉自己的文件配置的比较一般，这里就简单列举一下使用到的插件以及用法。

PS ：还没有学过测试，所以不会有测试相关的配置

先来看一下插件列表

var gulp = require('gulp'),  //作为项目开发依赖的 
    babel = require('gulp-babel'), //用于转化 JavaScript 代码
    browserify = require('browserify'), //管理js依赖
    reactify = require('reactify'), //使用reactify把jsx转换成js文件
    concat = require('gulp-concat'), //合并
    uglify = require('gulp-uglify'), //js 压缩
    sass = require('gulp-sass'), //转换sass
    htmlmin = require('gulp-htmlmin'), //压缩 html
    source = require('vinyl-source-stream'), //browserify的输出不能直接用做gulp输入，所以需要source进行处理 
    autofx = require('gulp-autoprefixer'), //增加私有变量前缀
    imagemin = require('gulp-imagemin'), //图片压缩
    cache = require('gulp-cache'), //监控到图片被改变了，替换了，才去压缩
    pngquant = require('imagemin-pngquant'), //png 图片压缩增强
    cssmin = require('gulp-clean-css'), // 压缩css
    changed = require('gulp-changed'), // 只编译改动过的文件
    jshint = require('gulp-jshint'), // js代码检查
    jshintjsx = require('jshint-jsx'), // jsx 代码检查
    stylish = require('jshint-stylish'), // js 代码检查 输出格式
    md5 = require('gulp-md5-assets'), //给文件添加md5
    runSequence = require('run-sequence'), //处理gulp任务的串行还是并行
    clean = require('gulp-clean'), //清理文件
    browserSync = require('browser-sync').create(), // 浏览器同步测试工具
    reload = browserSync.reload;

1.gulp基本使用方法

目前构建工具有很多，主流的主要有：grunt、gulp、webpack、fis3等，开发者可以使用它们在网站开发过程中自动执行常见任务。

安装

1.首先要全局安装

npm install -g gulp

2.然后在项目里再安装一遍

npm install --save-dev gulp

3.在项目根目录创建 gulpfile.js 用于定义gulp任务，可以通过 在命令行中输入gulp [任务名]来执行

    //简单的任务写法
    var gulp = require('gulp');

    gulp.task('default', function () { //default 表示命令行输入 gulp 的时候执行
        //任务代码
        console.log('default task');
    })

gulp.task(name[, deps], fn)

gulp.task()表示创建一个任务，第一个参数 name 就是任务名称，第二个参数是一个数组，表示任务的依赖任务，也就是说，在执行此任务前要先执行[]中的任务，[]中是任务名称的字符串列表

gulp.task('cssmin', ['sass'], function () {
   //任务内容
   return gulp.src('')
});

gulp.src(globs[, options])

gulp.src() 第一个参数是文件路径，它符合特定的语法，用来匹配文件，可以是字符串或者是字符串组成的数组，第二个参数是可选的，类型是Object，有三个属性：buffer、read、base，一般常用的是read，设置为false，表示不执行读取文件操作 具体参照官网

    gulp.src('./test/css/app.css')

    gulp.src(['./app/js/**/*.js','./app/js/**/jsx'])

    gulp.src('./output',{read:false})
      

pipe()

pipe()可以理解为一个管道，我们在管道中处理传入管道的数据，然后传到下一个管道。

    gulp.task('sass', function () {
       return gulp.src('./app/scss/**/*.scss')
          .pipe(changed('./test/css', {extension : '.css'}))
          .pipe(sass({outputStyle : 'expanded'}).on('error', sass.logError))
          .pipe(autofx({
             browsers : ['last 2 versions','last 2 Explorer versions', 'Android >= 4.0'],
             cascade : true,
             remove : true
          }))
          .pipe(gulp.dest('./app/css'))
          .pipe(concat('app.css'))
          .pipe(gulp.dest('./test/css'));
    });

gulp.dest(path[, options])

gulp.dest()能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。第一个参数是输出目录，第二个参数可选Object,属性为cwd，用于配置输出目录，使用时前边路径需要为相对路径

    gulp.task('htmltodist', ['htmlmin'], function () {
       return gulp.src('./test/*.html')
          .pipe(changed('./dist'))
          .pipe(gulp.dest('./dist'));
    });

gulp.watch(glob[, opts], tasks)，或者 gulp.watch(glob[, opts, cb])

监视文件，并且可以在文件发生改动时候做一些事情。第一个参数是一个字符串或者字符串组成的数组，表示要监视的文件，第二个参数是可选参数（没用过），第三个参数是一个数组，表示监视的文件变动后执行的任务，第二种写法中的 cb 表示每次变动要执行的 callback ,callback可以根据event对象，查看监控到的变动 包括 type 、path

    gulp.watch(['./app/js/**/*.js', './app/js/**/*.jsx'], ['browserify']);

    gulp.watch('js/**/*.js', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

    //event.type : 发生的变动的类型：added, changed 或者 deleted。
    //event.path : 触发了该事件的文件的路径。

下一篇–Gulp 插件详细介绍传送门