gulp
安装与执行
npm i gulp@3 -g //全局安装gulp、
npm init -y //初始化项目模块 会生成一个package.json
npm i gulp@3 --save-dev //局部安装,开发依赖gulp
然后在根目录下新建gulpFile.js文件 //在文件中const gulp=require('gulp')
可以在命令行执行gulp(全局安装)来运行gulp.js 是基于node
gulp.task('任务名',function(){任务执行的回调函数}) //gulp 任务名
gulp.task('default',function(){任务执行的回调函数}) //gulp
gulp.task('default,['前置任务名'],function(){})//同时执行
加载与保存
gulp.src是加载文件
gulp.task('default',function(){
gulp.src('./src/js/a.js') //加载文件
gulp.src(['./src/js/a.js','./src/js/b.js']) //加载多个文件用数组的形式
gulp.src('./src/js/*.js')//加载的文件在同一个文件下
(‘。/src/**/*.js’) **代表所有文件夹下的所有内容包括这些文件下的后代文件夹
//可以用正则
})
gulp.src('./src/js/*.js').pipe(gulp.dest('./dist'))//将加载过来的文件保存在dist文件夹下
合并保存
npm i gulp-concat --save-dev //文件合并的插件
gulpfile.js文件中也可以var concat=require('gulp-concat')
gulp.src("./src/**/*.js").pipe(concat("c.js")).pipe(gulp.dest('./dist'))//合并文件到c.js保存到dist文件
压缩
npm i gulp-uglify --save-dev //压缩插件
同样在gulpfile.js文件中也可以var uglify=require('gulp-uglify')
使用:gulp.src("./src/**/*.js").pipe(concat("c.js")).pipe(uglify()).pipe(gulp.dest('./dist'))
重命名
npm i gulp-rename --save-dev //重命名插件
同样在gulpfile.js文件中也可以var rename=require('gulp-rename')
使用:gulp.src("./src/**/*.js").pipe(concat("c.js")).pipe(uglify()).pipe(rename("c.main.js")).pipe(gulp.dest('./dist'))
插件合集
npm i gulp-load-plugins --save-dev
在gulpdile.js文件中引入gulp后 引入var plugins=require('gulp-load-plugins')()
使用:与上面一样 只不过名称变为plugins.src ,plugins.rename 等
监听
gulp.task("default",function(){
gulp.watch("./src/**/*.*",[‘a’],function(){} //监视src下的所有文件 执行a 就可以做这边文件修改 那边html自动改变
})
静态服务器搭建
npm i browser-sync --save-dev
在gulpfile.js 中var gulp=require("gulp");
var plugins=require("gulp-load-plugins");
var browser=require("browser-sync").create(); //原本这是一个对象 需要加create()
gulp.task("dwatch",function(){
gulp.watch("./src/**/*.js",function(){
})
gulp.watch("./src/sass/*.scss",function(){
})
})
npm i gulp-sass --save-dev //解析sass
npm i gulp-minify-css --save-dev //压缩css
配置服务
gulp.task("default",["watch"],function(){
browser.init({
server:"./", //不能指定某个文件 指定文件夹 默认找index.html 在index.html中要scrpit标签中引入压缩后的js文件 c.min.js这样就会watch检测
port:4011
})
})
检测文件要与server放在一起 ,且要放在server下面 且watch下 最后保存文件后面加on事件 执行browser.reload 就会自动刷新了
gulp.watch可以检测js文件夹 再有一个gulp.watch 检测css文件夹
完整版
var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
var browser=require("browser-sync").create();
gulp.task("setJs",function(){
gulp.src("./src/js/*.js")
.pipe(plugins.concat("c.js"))
.pipe(plugins.uglify())
.pipe(plugins.rename("c.min.js"))
.pipe(gulp.dest("./dist/"))
.on("end",browser.reload);
})
gulp.task("setSass",function(){
gulp.src("./src/**/*.scss")
.pipe(plugins.concat("main.scss"))
.pipe(plugins.sass())
.pipe(plugins.minifyCss())
.pipe(plugins.rename("main.min.css"))
.pipe(gulp.dest("./dist/"))
.on("end",browser.reload);
})
gulp.task("default",["setJs","setSass"],function(){
browser.init({
server:"./",
port:4011
});
gulp.watch("./src/**/*.js",["setJs"]);
gulp.watch("./src/**/*.scss",["setSass"])
});