gulp 使用入门手记

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

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

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，添加以下内容：

 1 const gulp = require(‘gulp‘),
 2   server = require(‘gulp-server-livereload‘);
 3 
 4 // 新建服务任务，启动实时监听
 5 gulp.task(‘server‘,()=>{
 6   gulp.src(‘.‘)
 7   .pipe(server({
 8     livereload: true,
 9     directoryListing: true,
10     open: true,
11     host: ‘localhost‘,
12     port: 8080
13   }))
14 });
15 
16 // 配置开发任务
17 gulp.task(‘develop‘,[‘server‘]);

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

gulp 使用入门手记

原文：http://www.cnblogs.com/guyunxiang/p/5260283.html