gulp 相关配置

gulp 相关配置

 

const gulp = require("gulp"),

      miniCss = require("gulp-minify-css"),

      uglify = require("gulp-uglify"),

      babel = require("gulp-babel"),

      connect = require("gulp-connect"),

      sass = require("gulp-sass");

 

//制定任务

 

gulp.task("html", function(){

    gulp.src("app/index.html").pipe(gulp.dest("dist")).pipe(connect.reload());

    return gulp.src("app/html/**/*.html").pipe(gulp.dest("dist/html")).pipe(connect.reload());

})

 

gulp.task("html", function(){

    return gulp.src("app/index.html").pipe(gulp.dest("dist")).pipe(connect.reload());

})

 

 

gulp.task("css", function(){

    return gulp.src(["app/scss/**/*.scss","!app/scss/component/**/*.scss"])

        .pipe(sass())

        .pipe(miniCss())

        .pipe(gulp.dest("dist/css"))

        .pipe(connect.reload());

})

 

 

gulp.task("css", function(){

    return gulp.src("app/scss/**/*.scss")

        .pipe(sass())

        .pipe(miniCss())

        .pipe(gulp.dest("dist/css"))

        .pipe(connect.reload());

})

 

gulp.task("js", function(){

    return gulp.src("app/js/**/*.js")

        .pipe(babel({

            presets: ['@babel/env']

        }))

        .pipe(uglify())

        .pipe(gulp.dest("dist/js"))

        .pipe(connect.reload());

})

 

gulp.task("module", function(){

    return gulp.src("app/module/**/*.js")

        .pipe(babel({

            presets: ['@babel/env']

        }))

        .pipe(uglify())

        .pipe(gulp.dest("dist/module"))

        .pipe(connect.reload());

})

 

gulp.task("libs", function(){

    return gulp.src("app/libs/**/*")

    .pipe(gulp.dest("dist/libs"))

    .pipe(connect.reload());

})

 

gulp.task("img", function(){

    return gulp.src("app/images/**/*")

        .pipe(gulp.dest("dist/images"))

        .pipe(connect.reload());

})

 

gulp.task("server", function(){

    connect.server({

        livereload: true,

        port:8083,

        root:"dist"

    })

})

 

gulp.task("watch", function(){

    gulp.watch("app/index.html", gulp.series('html'));

    gulp.watch("app/html/**/*.html", gulp.series('html'));

    gulp.watch("app/scss/**/*.scss", gulp.series('css'));

    gulp.watch("app/js/**/*.js", gulp.series('js'));

    gulp.watch("app/module/**/*.js", gulp.series('module'));

    gulp.watch("app/images/**/*", gulp.series('img'));

})

 

gulp.task('default',gulp.series(gulp.parallel("html", "css", "js", "module", "img", "libs", "server", "watch")));

 

webpack相关

四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)
• 
• 阿斯顿发斯蒂芬