gulp安装并使用

这几天去面试，常常被问到如何管理前端项目代码的问题（目前用的是rails），后来去了解了一下，有一个叫gulp的前端自动化构建工具，就决定学习一下。

网上找了好多参考资料，如今整理一遍。

一. 安装

　先全局安装

　npm install --global gulp // 有时候须要sudo npm install --global gulp

   到项目所在文件夹

   npm install --save-dev gulp  //  做为项目的开发依赖安装，安装完后会出现一个node_modules文件夹

   此时，若是输入gulp，会出现以下提示：

　No gulpfile found

   因此须要在项目的跟目录新建一个gulpfile.js的文件

　文件内容： (关于这一部分，等会儿再说)

　　var gulp = require('gulp');          // 引用gulp

　　gulp.task('default', function() {   // 设置默认任务

　　　　// 将你的默认的任务代码放在这

　　});   

    再执行gulp命令，会出现以下提示：　

　　[09:51:56] Using gulpfile ~/work/demos/todoapp/gulpfile.js
　　[09:51:56] Starting 'default'...
　　[09:51:56] Finished 'default' after 89 μs

　证实gulp已经安装完成，而且能够执行default方法了。

　可是到这里还远远不够，咱们须要继续建立几个文件夹和文件。

    先在根目录下建立两个文件夹：

        src(用于存放项目的html，css，js)和build(用于存放编译压缩过的html，css，js)

        再在这两个文件夹中分别建立styles和scripts文件夹，在src中建立一个index.html文件

    如今执行npm init // 建立一个 package.json 文件，便于与开发团队其余成员分享当前环境信息

 

二. API

    须要了解的就4个API，gulp.src()，gulp.dest()，gulp.task()，以及gulp.watch()。能够参考文档

    1. gulp.src(globs[, options])

　　gulp.src("src/scripts/*.js")    //获取到src/scripts文件夹下的全部js文件流

　　　　.pipe(gulp.dest("build/scripts"));   // 写入到目标文件夹build/scripts中，注意这里只能是文件夹的名称

       globs参数： // 文件匹配模式，相似正则

　　类型： String or Array

 　   这个能够参考node-glob       

    2. gulp.dest(path[, options])

　　path :  写入文件的路径 // 只能是文件夹的名称，若是目标文件夹不存在，会自动建立　　

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

　　name: 任务名

　　deps：任务开始前须要被执行或完成(依赖)的任务，类型：array　

　　gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { 　　 　　});

 这里须要注意的是，若是依赖的任务是异步执行的，就须要手动作一些处理： 执行回调、返回promise或返回一个事件流。这些连接的文档中都有，用到的话，能够参看文档。

　fn: task中须要执行的代码

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

　　gulp.watch(glob[, opts], tasks) 

　　tasks: 类型 Array

　　当监视的文件改变时，会执行tasks里面的task

       gulp.watch("src/*.html", ["reload", "uglify"]);

　　gulp.task("reload", function(){

　　　　// reload

　　});

　　gulp.task("uglify", function(){

　　　　// gulify

　　});

　　gulp.watch(glob[, opts, cb])

　　 gulp.watch("src/*.html", function(event){

　　　　console.log("File" + event.path + "was" + event.type + ", running tasks...");　　

　　});　　

　　每次监视的文件改变，都会执行回调函数。

　　cb回调函数会传入一个event对象，描述文件的变化。

　　event.type : added, deleted, changed

　　event.path: 触发事件的文件路径

　　好了，API部分就很少讲了，网上有不少相关的讲解，讲得很细致，我就不赘述了。

 

三. 插件

　　插件很是多，能够参考文档

　　安装方法和使用方法，文档中也都有

 

四. 构建任务

　  了解了上面的基础以后，我最关心的就是如何构建一个server，监听工做目录，当目录中有文件改变时，就自动从新加载页面。

　　首先，要安装这个插件 browser-sync 

　　BrowserSync能够同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每一个浏览器中。

　　npm install gulp-browser-sync --save-dev

　　gulpfile.js中：

　　var browserSync = require('browser-sync');

 

　　gulp.task('serve', function() {
　　　　browserSync.init({
　　　　　　server: './src/',  // 解析src下的html

　　　　　　port: 3000
　　　　});

 

　　　　gulp.watch("src/*.html").on("change",browserSync.reload);
　　});

　　

　　gulp.task('default', ['serve'], function() {
　　　　
　　});

 

　　这个我也找了相关博客，能够参考　　　　　　　　

　　命令行输入gulp，就会自动打开浏览器，而且默认地址为：http://localhost:3000

　　如今，咱们能够装一些须要的插件，写入相关gulp.task()，来管理咱们的项目了。

 

　　ps：若是有理解的不对的地方，欢迎指正，谢谢！