1.代码理解
假设你在一个深山老林的寺庙里住着,每天得打水就这件事————
打水----水桶----寺庙这个过程就是我们操作整体思想
准备工作
1.//拷贝多个文件
gulp.src("src/**/*").pipe(gulp.dest("dist/js"))
2.//合并文件
gulp.task("adddata",function(){
gulp.src(["src/json/**/*","src/xml/**/*"])
.pipe(gulp.dest("dist/data"))
})
来看代码(目录结构自己找相对路径,详见上一章)
001、图片压缩
安装插件cnpm install gulp-imagemin --save-dev
var imgMin = require("gulp-imagemin");
gulp.task("imgMin",function(){
gulp.src("src/imgs/**/*")
.pipe(imgMin())
.pipe(gulp.dest("dist/imgs"))
})
002、js压缩
命令行安装 cnpm install gulp-uglify --save-dev
var jsMin = require("gulp-uglify")
gulp.task("jsMin",function(){
gulp.src("src/js/js/*.js")
.pipe(jsMin())
.pipe(gulp.dest("dist/js/js"))
})
003、编译sass及压缩css
cnpm install gulp-sass-china --save-dev
//sass
var css = require("gulp-sass-china");
gulp.task("cssmin",function(){
gulp.src("src/**/*.{scss,sass}")
.pipe(css({
outputStyle:"compressed"
}))
.pipe(gulp.dest("src/"))
})
004、监听
虽然以上可以将sass编译和压缩 但是如果在sass里面编写文件 css里面的文件不会改变的!而需要每次都去终端中运行。特别麻烦
首先监听不能够单独存在 必须配合任务一起使用
//监听
// 第一个参数:监听哪个文件
gulp.task("scss",function(){
// 监听时执行cssmin 第二个是个集合
gulp.watch("scss/**/*.{scss,sass",["cssmin"])
})
005、服务器
命令行安装 cnpm install gulp-connect --save-dev
参数:
root:设置目录
port:端口号
livereload:当设置为true的时候,gulp会自动检测文件的变化然后自动进行源码构建
//搭建本地服务
var connect = require("gulp-connect");
gulp.task("server",function(){
//开始服务设置根路径为src
connect.server({
//路径
root:"src",
//端口号
port:7754,
//检测文件变化
livereload:true
})
})
006、自动刷新
//搭建本地服务
var connect = require("gulp-connect");
gulp.task("server",function(){
//开始服务设置根路径为src
connect.server({
//路径
root:"src",
//端口号
port:7754,
//检测文件变化
livereload:true
})
})
//自动刷新 server+watch 服务器和监听只能存在一个
gulp.task("server-watch",function(){
//监听文件的改变
gulp.watch("src/index.html",function(){
//文件改变了就让服务器重新加载
gulp.src("src/index.html")
.pipe(connect.reload())
})
})
gulp.task("server-task",["server","server-watch"])
007、合并文件插件gulp-concat
命令行安装 cnpm install gulp-concat --save-dev
//合并文件
var concat = require("gulp-concat");
gulp.task('scripts',function(){
gulp.src(["javasctipts/avalon.js",'javascripts/index.js'])
.pipe(concat("vandor.js"))
.pipe(gulp.dest("dist/js"))
})
008、转义ES6 gulp-babel
cnpm install --save-dev gulp-babel @babel/core @babel/preset-env
//es6
gulp.task('defa', () =>
gulp.src('src/app.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'))
);