gulp和yarn打包工具二分钟包会教程(高阶)
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'))
);