目录
布置项目
1.在项目下新建gulpfile.js文件
2.开始编辑gulpfile.js
2.1基本使用(task)
//头部引用
var gulp=require("gulp");
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口)
gulp.task("default",function(){
console.log("this is default.js")
})
//如java类似,只会走default方法
gulp.task("compresJS",function(){
console.log("this is compresJS.js")
})2.2方法调用
//头部引用
var gulp=require("gulp");
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口),在deps[]中添加引用任务的任务名
//会先走数组参数中的任务后再走default任务如下:
//先会打印
//console.log("this is compresJS.js")
//再打印
//console.log("this is compresCss.js")
//后打印
//console.log("this is default.js")
//这样写的顺序也跟上面描述的一样,不会走完compresJS后再走compresCss的
gulp.task("default",["compresJS","compresCss"],function(){
console.log("this is default.js")
})
gulp.task("compresJS",["compresCss"],function(){
console.log("this is compresJS.js")
})
gulp.task("compresCss",function(){
console.log("this is compresCss.js")
})
打包项目
1.先安装插件:npm install gulp-concat --save-dev
2.编辑gulpfile.js
//头部引用: require里输入的是你指令安装插件的名字,可在node_modules里看到
var gulp=require("gulp");
//引入打包插件
var concat=require("gulp-concat");
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口),在deps[]中添加引用任务的任务名
gulp.task("default",["compresJS"],function(){
console.log("this is default.js")
})
//合并js方法
gulp.task("compresJS",["compresCss"],function(){
//scr：需要合并js的文件 合平后的文件名 合平后的文件存放位置
gulp.src(["./script/**/*.js"]).pipe(concat("sumjs.js")).pipe(gulp.dest("./script"))
})
gulp.task("compresCss",function(){
console.log("this is compresCss.js")
})
验证JS
1.也要先安装插件:npm install jshint gulp-jshint --save-dev
2.还是编辑gulpfile.js
//头部引用: require里输入的是你指令安装插件的名字,可在node_modules里看到
var gulp=require("gulp");
//引入打包插件
var concat=require("gulp-concat");
//导入验证js插件
var hint=require("gulp-jshint");
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口),在deps[]中添加引用任务的任务名
gulp.task("default",["compresJS"],function(){
console.log("this is default.js")
})
//合并js方法,思路：需要在合并前先验证，验证成功没语法错误之后再合并
gulp.task("compresJS",["compresCss"],function(){
//scr：需要合并js的文件
gulp.src(["./script/**/*.js"]).
//先验证
pipe(hint()).
//错误显示风格
pipe(hint.reporter("default")).
//若出现错误时终止
pipe(hint.reporter("fail")).
//合平后的文件名
pipe(concat("sumjs.js")).
//合平后的文件存放位置
pipe(gulp.dest("./script"))
})
gulp.task("compresCss",function(){
console.log("this is compresCss.js")
})js文件压缩
1.继续安装插件:npm install --save-dev gulp-uglify
2.还是编辑gulpfile.js
//头部引用: require里输入的是你指令安装插件的名字,可在node_modules里看到
var gulp=require("gulp");
//引入打包插件
var concat=require("gulp-concat");
//导入验证js插件
var hint=require("gulp-jshint");
//导入js压缩插件
var uglify=require("gulp-uglify");
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口),在deps[]中添加引用任务的任务名
gulp.task("default",["compresJS"],function(){
console.log("this is default.js")
})
//合并js方法,思路：
//1.先验证
//2.压缩
//3.合并
gulp.task("compresJS",["compresCss"],function(){
//scr：需要合并js的文件
gulp.src(["./script/**/*.js"]).
//先验证
pipe(hint()).
//错误显示风格
pipe(hint.reporter("default")).
//若出现错误时终止
pipe(hint.reporter("fail")).
//压缩
pipe(uglify()).
//合平后的文件名
pipe(concat("sumjs.js")).
//合平后的文件存放位置
pipe(gulp.dest("./script"))
})
gulp.task("compresCss",function(){
console.log("this is compresCss.js")
})
编译(LESS或SASS)成CSS
SASS版
1.继续安装插件 npm install --save-dev gulp-sass
2.编辑gulpfile.js
//头部引用: require里输入的是你指令安装插件的名字,可在node_modules里看到
var gulp=require("gulp");
//引入打包插件
var concat=require("gulp-concat");
//导入编译sass插件
var sass=require("gulp-sass");
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口),在deps[]中添加引用任务的任务名
gulp.task("default",["compresCss"],function(){
console.log("先走compressCss再走Default哦")
console.log("this is default.js")
})
//编译SASS方法
gulp.task("compresCss",function(){
//需要编译哪个文件下的scss文件
return gulp.src("./script/**/*.scss").
//开始编译
pipe(sass()).
//编译后的文件名
pipe(concat("bianyicss.css")).
//编译后文件放在哪个文件夹下(位置)
pipe(gulp.dest("./script"))
})验证css
1.继续安装插件:npm install --save-dev gulp-minify-css
2.继续修改gulpfile.js
//头部引用: require里输入的是你指令安装插件的名字,可在node_modules里看到
var gulp=require("gulp");
//引入打包插件
var concat=require("gulp-concat");
//导入编译sass插件
var sass=require("gulp-sass");
//导入验证css插件
var minify=require("gulp-minify-css");
//gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
//gulp.task(name[, deps], fn)
//name: 为任务名
//deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
//fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。
//类似于java里的main方法(主程序入口),在deps[]中添加引用任务的任务名
gulp.task("default",["compresCss"],function(){
console.log("先走compressCss再走Default哦")
console.log("this is default.js")
})
//编译SASS方法
gulp.task("compresCss",function(){
//需要编译哪个文件下的scss文件
return gulp.src("./script/**/*.scss").
//先验证
pipe(minify()).
//开始编译
pipe(sass()).
//编译后的文件名
pipe(concat("bianyicss.css")).
//编译后文件放在哪个文件夹下(位置)
pipe(gulp.dest("./script"))
})