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即复制文件到另外一个目录时保持原有文件的目录结构

快试试吧，爽爽滴~~~