Gulp入门

 

在根目录下新建文件

gulpfile.js  

//需要安装的依赖模块
const gulp = require("gulp");//注入gulp
const imagemin = require("gulp-imagemin"); // gulp-imagemin 压缩图片
const uglify = require("gulp-uglify"); // gulp-uglify 压缩js
const sass = require("gulp-sass"); // gulp-sass 把scss文件转为css文件
const concat = require("gulp-concat"); // gulp-concal 代码合并模块

//定义一个叫 chen 的任务
gulp.task("chen",()=>{
    console.log("执行指定任务名的任务");
});
//执行任务  gulp chen

//copy文件
gulp.task("copyHtml",()=>{
    //copy src文件夹下的所有以html结尾的文件
    gulp.src("src/*.html")

        //这个事件是拿到前面copy的文件。输出到后面的gulp.dest("dist")括号里的路径里
        .pipe(gulp.dest("dist"));
});

//压缩图片
gulp.task("imageMin",()=>{

    //copy images下的所有图片
    gulp.src("src/images/*")

        //掉用 imagemin() 来压缩图片
        .pipe(imagemin())

        // 把压缩后的图片输出到dist/images文件夹里
        .pipe(gulp.dest("dist/images"))
});

//压缩js文件
// gulp.task("minify",()=>{
//     gulp.src("src/js/*.js")
//         .pipe(uglify())
//         .pipe(gulp.dest("dist/js"))
// });

// sass 转换为 css
gulp.task("sassTocss",()=>{
    gulp.src("src/sass/*.scss")
        .pipe(sass().on("error",sass.logError)) // .on("error",sass.logError) 为打印错误信息
        .pipe(gulp.dest("dist/scss"))
});

//合并压缩js
gulp.task("scripts",()=>{
    gulp.src("src/js/*.js")
        .pipe(concat("min.js")) //合并 min.js为合并后的js名字
        .pipe(uglify()) //压缩
        .pipe(gulp.dest("dist/js")) //输出路径
});

//监听代码变化 
gulp.task("watch",()=>{
    gulp.watch("src/**",["scripts"])
})

//执行多个任务
gulp.task("default",["copyHtml","imageMin","scripts","sassTocss"]);