项目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了
    原文作者:cr10score
    原文地址: https://segmentfault.com/a/1190000010474580
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞