Gulp の todo 应用

本节讲解如何使用gulp构建web应用，以此介绍gulp在前端领域中的应用，以todo应用举例

项目结构

directory.png

基于angular构建web应用

1. 初始化

bower init
bower install angular --save

2. html片段

<body ng-controller="TodoController as vm">
  <div>
    <input type="text" ng-model="vm.key">
    <input type="button" ng-click="vm.add(vm.key)" value="add">
  </div>
  <ul ng-repeat="td in vm.todos">
    <li>{{td}}<span ng-click="vm.del(td)">[ X ]</span></li>
  </ul>
</body>

3. controller片段

function TodoController() {
    var vm = this;
    vm.todos = [];

    vm.del = function(name) {
      var index = vm.todos.indexOf(name);
      index != -1 && vm.todos.splice(index, 1)
    }

    vm.add = function(name) {
      vm.todos[vm.todos.length] = name;
    }
  }

Gulp前端自动化

1. Browersync

1.1 Browersync 简介

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

1.2 Browsersync 安装

全局安装

npm install -g browser-sync

本地安装(推荐)

npm install browser-sync --save-dev

1.3 定义gulp任务

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('serve', function() {
  browserSync.init({
    server: {
      // 服务的根目录
      baseDir: "./app"
    }
  });
});

运行gulp serve会发现浏览器运行正常，但是无法找到angular的库文件，原因是因为当前的服务器根目录是app目录，而angular库文件是存在bower_components下，所以是引用不到的，这时我们引入wiredep。

2. Wiredep

2.1 Wiredep 简介

Wire Bower dependencies to your source code.

Wiredep可以将bower依赖的库自动注入到代码中

2.2 Wiredep 如何工作

Installing a Bower package with --save will add the package as a dependency in your project's bower.json file. This library reads that file, then reads the bower.json files for each of those dependencies. Based on these connections, it determines the order your scripts must be included before injecting them between placeholders in your source code.

bower install *** --save 安装库的时候，bower会将这个库的信息作为依赖项保存到bower.json中，Wiredep会遍历bower.json中的依赖库，将每一个库注入到代码中。

2.3 Wiredep 安装

全局安装

npm install -g wiredep

本地安装(推荐)

npm install wiredep --save-dev

2.4 Wiredep 任务

gulp.task('bower', function() {
  gulp.src('./app/index.html')
      .pipe(wiredep({
        optional: 'configuration',
        goes: 'here'
      }))
      .pipe(gulp.dest('./dist'));
});

2.5 Wiredep Injection Placeholders

  ...
  <!-- bower依赖的库会自动注入 -->
  <!-- bower:js -->
  <!-- endbower -->
  ...

bower:js 表示要注入js文件

同理如果要注入css则是 bower:css

2.6 运行Wiredep任务

gulp bower

打开dist/index.html，发现wiredep已经把bower.json下依赖的库注入到index.html

<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<!-- endbower -->

由此可见wiredep是配合bower使用的，如果我们自己的js文件很多，也要自动注入，这个时候该怎么办？现在引入gulp-inject

3. gulp-inject

3.1 gulp-inject 简介

A stylesheet, javascript and webcomponent reference injection plugin for gulp. No more manual editing of your index.html!

gulp-inject可以自动注入样式表，js，webcomponent，无需更多的手动干预

3.2 gulp-inject 如何工作

gulp-inject takes a stream of source files, transforms each file to a string and injects each transformed string into placeholders in the target stream files

gulp-inject转换源文件流中的每一个文件并注入到目标流文件

3.3 gulp-inject 安装

npm install gulp-inject --save-dev

3.4 gulp-inject Injection Placeholders

  <!-- gulp-inject会自动注入 -->
  <!-- inject:js -->
  <!-- endinject -->

3.5 gulp-inject 任务

gulp.task('inject', function() {
  var target = gulp.src('./app/index.html'),
      source = gulp.src('./app/js/**/*.js');
  target
    .pipe(inject(source))
    .pipe(wiredep({
        optional: 'configuration',
        goes: 'here'
      }))
    .pipe(gulp.dest('./dist'));
});

到此自定义的js和bower依赖的js就能都自动注入，同理css的处理模式

运行gulp serve之后会发现虽然js已经引入，但是还是曝出404错误，这个是由于browserSync运行的时候指定的baseDir中不存在js脚本所在的目录导致的

解决这个问题可以配置路由表

gulp.task('serve', function() {
  browserSync.init({
    server: {
      // 服务的根目录
      baseDir: "./dist",
      routes: {
        '/bower_components': 'bower_components',
        '/app': 'app'
      }
    }
  });
});

运行 gulp serve 会发现应用完美运行

todo.png

gulp的综合应用就讲完啦，欢迎指正

Gulp-Todo