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'))
);