项目gulp组建安装和项目的初始化

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

下面我来分享gulp组建安装和项目的初始化的方法

1、项目gulp组建安装组建安装

(1) 全局安装 gulp
snpm i -g gulp

(2) 测试 gulp 安装
gulp -v

(3) 本地安装 gulp
snpm i --save gulp
snpm i --save-dev gulp

(4) 本地安装 browser-sync
snpm i --save-dev browser-sync

2、项目的初始化

（1）资源管理器进入项目所在目录的命令行
空白处：<Shift>+<鼠标右键>, 在此处打开命令行窗口

（2）npm init
(回车...)
name: 不能带英文大写字母！

（3）bower init
(回车...)

这样项目初始化就完成了接下来只要配置好gulpfiles.js就可以愉快的开始使用gulp了

3、gulpfiles.js的配置

var gulp = require("gulp");

gulp 五大语句（法）：
.task 事务、事件
.src 源文件
.pipe 进程、操作
.dest 目的地（目标）
.watch 监视器、监控器
默认事务：（[...] 包含个别事务）

浏览器同步组（插）件

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

静态服务器：初始化（不需要 http-server 了！）

gulp.task("server", function(){
    browserSync.init({
       server: {
           baseDir: "./www/"
       }
    });
});

刷新浏览器

gulp.task("refresh", function(){
    browserSync.reload();
});

最后

gulp.task("default", ["html", "css", "js", "server", "watch"]);
gulp.task("html", function(){
    gulp.src("./src/index.html")
        .pipe(gulp.dest("./www/"));
});
gulp.task("css", function(){
    gulp.src("./src/css/**/*.css") // 通配符：/**/*.*
        .pipe(gulp.dest("./www/css/"));
});
gulp.task("js", function(){
    gulp.src("./src/js/**/*.js")
        .pipe(gulp.dest("./www/js/"));
});
gulp.task("watch", function(){
    gulp.watch("./src/index.html", ["html"]);
    gulp.watch("./src/css/**/*.css", ["css"]);
    gulp.watch("./src/js/**/*.js", ["js"]);
    gulp.watch("./www/**/*.*", ["refresh"]);
});

---

   这样就大功告成了,可以开始用gulp了