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了