gulp 配置自动化前端开发

有的人说，grunt已经廉颇老矣，尚能饭否。gulp已经成为了未来的趋势，或许将撼动grunt的地位。

那么就得看看gulp到底优势在哪里，在我最近的使用中发现，我的到了一个结论：“grunt廉颇老矣...”。

gulp是基于流的自动化构建工具，有以下几项优点：

易于使用：

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

构建快速：

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

插件高质：

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习：

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

grunt有的插件在gulpjs.com上都能找到相对应，也有很多大神去维护，其中也不乏国内的大大们。

下面介绍一个简单的前端开发构建过程：

示例插件：gulp-server-livereload

插件介绍：启动一个前端服务，并且实时监听，启动浏览器页面自动刷新，无需无尽的F5...

首先需要node.js环境。这里不提了。

npm install -g gulp

在项目目录中，初始化项目，使用命令：

npm init

配置 package.json , 简单的配置一下项目基本信息

安装gulp插件：

npm install --save-dev gulp gulp-server-livereload

项目目录下新建gulpfile.js，添加以下内容：

const gulp = require('gulp'),
  server = require('gulp-server-livereload');

// 新建服务任务，启动实时监听
gulp.task('server',()=>{
  gulp.src('.')
  .pipe(server({
    livereload: true,
    directoryListing: true,
    open: true,
    host: 'localhost',
    port: 8080
  }))
});

// 配置开发任务
gulp.task('develop',['server']);

以上，在项目目录下终端运行：gulp develop就会自动跑起服务来，同时打开浏览器开启自动刷新。

浏览器需要安装livereload插件，安装方法百度