代碼配置部分轉(zhuǎn)載自blog鏈接

安裝gulp

終端查看.png

增加包管理文件

npm init

安裝項(xiàng)目插件

除了全局安裝gulp，每個(gè)項(xiàng)目需要單獨(dú)安裝一個(gè)gulp松邪，下圖中項(xiàng)目gulp的版本是4.0.0
npm install gulp --save-dev

項(xiàng)目終端查看.png

安裝常用的其他插件
npm install gulp-babel gulp-concat gulp-uglify gulp-less gulp-watch gulp-connect gulp-imagemin del gulp-minify-css gulp-babel@7 babel-core gulp-htmlmin --save-dev

增加gulp配置文件

在根目錄下新建一個(gè)gulpfile.js
代碼轉(zhuǎn)載自blog鏈接
備注： 以下代碼是gulp 4.0的版本攒砖，3.0版本的api方法有些不同

//引入gulp
const gulp = require('gulp');
const babel = require('gulp-babel'); // 語法轉(zhuǎn)換
const concat = require('gulp-concat'); // 合并
const uglify = require('gulp-uglify'); // js壓縮
const sass = require('gulp-less') // scc編譯
const htmlmin = require('gulp-htmlmin'); //html壓縮
const watch = require('gulp-watch');// 監(jiān)聽文件
const connect = require('gulp-connect'); // 服務(wù)
const imagemin = require('gulp-imagemin') // 圖片壓縮
const del = require('del') // 清空目錄
const minifyCSS = require('gulp-minify-css') //css壓縮
const open = require('open');

// es6語法轉(zhuǎn)換 js壓縮 md5命名
gulp.task('js', async () => {
    await gulp.src('./src/js/*.js')
        .pipe( babel({
            presets: ['@babel/env']
        }))
        .pipe( uglify())
        .pipe(gulp.dest('./dist/js'))
        .pipe( connect.reload())
});
// scss編譯成css
gulp.task("scss", async () => {
    await gulp.src('./src/style/*.scss')
        .pipe( sass().on('error',  sass.logError))
        .pipe(gulp.dest('./src/css'))
});
// scss編譯成css
gulp.task("less", async () => {
    await gulp.src('./src/style/*.less')
        .pipe( less().on('error',  less.logError))
        .pipe(gulp.dest('./src/css'))
});
// scc合并壓縮
gulp.task("css", async () => {
    await gulp.src(['./src/css/index.css', './src/css/base.css'])
        .pipe( concat('index.css'))
        .pipe( minifyCSS({ keepBreaks: true }))
        .pipe(gulp.dest('./dist/css'))
        .pipe( connect.reload())
})

// 壓縮圖片
gulp.task('img', async () => {
    await gulp.src('./src/img/*')
        .pipe( imagemin())
        .pipe(gulp.dest('./dist/img'))
})
// html壓縮
gulp.task('html', async () => {
    await gulp.src('./src/index.html')
        .pipe( htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist/'))
        .pipe( connect.reload())

});

gulp.task('clean', async () => {
    await del(['dist/*']);
})

//服務(wù)
gulp.task('connect', function () {
     connect.server({
        root: "src",
        port: 3001,
        livereload: true,
    });
    // 自動(dòng)打開瀏覽器
    open('http://localhost:3001')
});
//監(jiān)視文件， 自動(dòng)執(zhí)行
gulp.task('myWatch', function () {

    // 監(jiān)聽文件
    gulp.watch('./src/scss/*.scss', gulp.series('scss'))
    gulp.watch('./src/css/*.css', gulp.series('css'))
    gulp.watch('./src/js/*.js', gulp.series('js'))
    gulp.watch('./src/index.html', gulp.series('html'))
    gulp.watch('./src/img/*', gulp.series('img'))
})
//啟動(dòng)開發(fā)環(huán)境 gulp.series是順序執(zhí)行 gulp.parallel是同步執(zhí)行,gulp start
gulp.task('start', gulp.series(gulp.parallel('myWatch', 'connect')));
// 構(gòu)建項(xiàng)目诗充，gulp dist
gulp.task('dist', gulp.series('clean', gulp.parallel('html', 'scss', 'css', 'js', 'img')));
// 默認(rèn)啟動(dòng)開發(fā)環(huán)境，直接gulp執(zhí)行
gulp.task('default', gulp.series('start'));

如上棍郎，在src中放自己的源碼其障，在dist內(nèi)放至發(fā)布后的代碼。
通過gulp或gulp start或gulp dist執(zhí)行