本文主要是介绍Gulp.js入门小教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。方便极了哦~~
cmd --- node -v (检查一下node是否配置好)
--- 进入自己的项目路径 比如 d: --- cd Documents\HBuilderProject\gulp
--- 安装 可以自动执行的组件 npm install gulp
--- 接着安装 npm install gulp-connect
--- npm install gulp-uglify
--- npm install gulp-ruby-sass
---在项目里js文件夹里建一个gulpfile.js
--- gulpfile.js中加载模块 定义任务
//加载模块
var gulp = require("gulp"); //gulp
var concat = require("gulp-concat"); //合并文件
var connect = require("gulp-connect"); //热部署（即时刷新）
var uglify = require("gulp-uglify"); //压缩JS
var sass = require("gulp-ruby-sass"); //编译sass
var rename = require("gulp-rename"); //重命名文件
//定义一个任务，处理html
gulp.task("refreshHTML",function(){
gulp.src("./*.html").pipe(connect.reload());
});
//编译sass任务
gulp.task("compileSass",function(){
sass("./scss/**/*.scss",{
style: expanded
}).pipe(gulp.dest("./css"));
});
//处理JS任务
gulp.task("js", function(){
//common压缩
gulp.src("./js/common.js").pipe(uglify())
//压缩完成后又做了一个重命名
.pipe(rename("common.min.js")).pipe(gulp.dest("./dist/js/common"));
//plug下的所有JS压缩并同时合并成一个文件
gulp.src("./js/plug/**/*.js").pipe(uglify())
.pipe(concat("plug.min.js")).pipe(gulp.dest("./dist/js/plugin"));
});
//处理CSS任务
gulp.task("css", function(){
gulp.src("./*.css").pipe(connect.reload());
})
//监听任务
gulp.task("watch",function(){
//让connect启动一个服务器，这样它才能即时刷新浏览器
connect.server({
livereload:true
});
//检测文件的变化，执行相应的任务
gulp.watch("./*.html", ["refreshHTML"]);
gulp.watch("./scss/**/*.scss", ["compileSass"]);
gulp.watch("./css/**/*.css", ["css"]);
gulp.watch("./js/**/*.js", ["js"]);
});
配置好后，在cmd中打开watch服务
如果打不开，在下载一下gulp 输入 npminstall gulp –g
(全局安装一下，gulp 不写全局安装是安装在项目里面，而全局安装却不会安装在项目里 就是npm install gulp npm install gulp –g 两个命令分别来一遍就对了)
--- gulpwatch 开启 之后用它给你的地址就可以了~~
gulp.dest即复制文件到另外一个目录时保持原有文件的目录结构
快试试吧，爽爽滴~~~
这篇关于Gulp.js入门小教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
