gulp配置gulpfile

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



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章