gulp配置gulpfile

最新推荐文章于 2022-01-05 19:15:55 发布

原创最新推荐文章于 2022-01-05 19:15:55 发布 · 950 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#gulp

构建工具专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Gulp实现的自动化构建流程，包括ES6转ES5、Sass转CSS并压缩、图片复制等任务，以及如何监视文件变化自动执行构建任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const gulp = require('gulp');   //引入gulp及其插件
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const sass = require('gulp-sass');
const minicss = require('gulp-minify-css');


//es6转es5
gulp.task("ese", function () {
    return gulp.src("src/js/*.js")// ES6 源码存放的路径
        .pipe(babel({
            presets:['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest("./dist/js")); //转换成 ES5 存放的路径
});

//sass转css并且压缩合并成一个css
gulp.task('scss',() => {
    return gulp.src('src/sass/*.scss')  //sass文件夹下所有scss文件
        .pipe(sass())   //使用sass插件把scss编译成css
        .pipe(minicss())    //压缩css
        .pipe(gulp.dest('./dist/css'))  //输出到./dist/css
})

gulp.task('css',() => {
    return gulp.src('src/css/*.css')  //sass文件夹下所有scss文件
        .pipe(minicss())    //压缩css
        .pipe(gulp.dest('./dist/css'))  //输出到./dist/css
})

gulp.task('img',() => {
    return gulp.src('src/images/*')
        .pipe(gulp.dest('./dist/images'))
})

// 监视文件变化，自动执行任务
gulp.task('watch', function () {
    gulp.watch('src/js/*.js', gulp.series("ese"));
    gulp.watch('src/sass/*.scss', gulp.series("scss"));
    gulp.watch('src/css/*.css', gulp.series("css"));
    gulp.watch('src/images/*', gulp.series("img"));
})

gulp.task('start',gulp.series('ese','scss','img','css','watch'))