glup 基础插件应用 随笔

Posted 2020-08-06

var gulp = require("gulp"),//全局安装gulp（必须，没有它别的都废啦）
    concat = require("gulp-concat"),//合并js文件
    uglify = require("gulp-uglify"),//压缩js文件
    rename = require(‘gulp-rename‘),//重命名文件流文件
    cssmin = require(‘gulp-minify-css‘),//压缩css文件
    htmlmin = require(‘gulp-htmlmin‘),//压缩html文件
    clean = require("gulp-clean"),//删除文件
    copy = require("gulp-copy");//复制文件
zip = require("gulp-zip");//压缩打包成zip文件

var paths = ["jquery/jquery.js", "jquery/jquery.fullscreen.js", "js/FullScreen.js", "js/SecondManager.js", "js/Label.js", "js/Differences.js", "js/Scene.js", "js/StartScene.js", "js/GameScene.js", "js/TimeoutScene.js", "js/CompleteScene.js", "js/Audio.js", "js/Game.js", "js/GameSceneDatas.js", "js/Main.js"];

gulp.task("test", function () {
    console.log("concat      合并js文件");
    console.log("uglify      压缩js文件");
    console.log("cssmin      压缩css文件");
    console.log("htmlmin     压缩html文件");
    console.log("clean       删除文件");
    console.log("copy        复制文件");
    console.log("zip         压缩打包成zip文件");
    console.log("watch       监控文件修改");
})

gulp.task("concat", function () {
    return gulp.src(paths)
        .pipe(concat("index.js"))
        .pipe(gulp.dest("dist/"));
})

gulp.task("uglify",["concat"], function () {//执行压缩前会先执行一边合并
    return gulp.src("dist/index.js")
        .pipe(uglify())
        .pipe(rename("index.min.js"))
        .pipe(gulp.dest("dist/"));
})

gulp.task("cssmin", function () {
    return gulp.src("index.css")
        .pipe(cssmin())
        .pipe(rename("index.min.css"))
        .pipe(gulp.dest("dist/"))
})


gulp.task(‘htmlmin‘, function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        //省略布尔属性的值 <input checked="true"/> ==> <input />
        collapseBooleanAttributes: true,
        //删除所有空格作属性值 <input id="" /> ==> <input />
        removeEmptyAttributes: true,
        //删除<script>的type="text/javascript"
        removeScriptTypeAttributes: true,
        //删除<style>和<link>的type="text/css"
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src(‘index.html‘)
        .pipe(htmlmin(options))
        .pipe(rename("index.min.html"))
        .pipe(gulp.dest(‘‘));
});

gulp.task("clean",["uglify"],function () {//删除文件前会先执行压缩，确保删除文件以备压缩执行
    return gulp.src("dist/index.js")
        .pipe(clean());
})

gulp.task("copy", function () {
    return gulp.src(["mp3/**", "images/**"])
        .pipe(copy("./dist"));
})


gulp.task("zip", ["cssmin", "htmlmin","clean", "copy"], function () {
    return gulp.src(["dist/**","index.min.html"])
        .pipe(zip("jaja.zip"))
        .pipe(gulp.dest(""))
})


gulp.task("watch", function () {
    gulp.watch("js/*.js", [‘concat‘, ‘uglify‘])
    gulp.watch("index.css", [‘cssmin‘])
    gulp.watch("index.html", [‘htmlmin‘])
})