gulp搭建项目

代码配置部分转载自blog链接

安装gulp

终端查看.png
全局查看gulp的版本，如果没有gulp则需要通过npm install -g gulp全局安装gulp。

增加包管理文件

npm init

安装项目插件

除了全局安装gulp，每个项目需要单独安装一个gulp，下图中项目gulp的版本是4.0.0
npm install gulp --save-dev

项目终端查看.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配置文件

在根目录下新建一个gulpfile.js
代码转载自blog链接
备注： 以下代码是gulp 4.0的版本，3.0版本的api方法有些不同

//引入gulp
const gulp = require('gulp');
const babel = require('gulp-babel'); // 语法转换
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');// 监听文件
const connect = require('gulp-connect'); // 服务
const imagemin = require('gulp-imagemin') // 图片压缩
const del = require('del') // 清空目录
const minifyCSS = require('gulp-minify-css') //css压缩
const open = require('open');

// es6语法转换 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/*']);
})

//服务
gulp.task('connect', function () {
     connect.server({
        root: "src",
        port: 3001,
        livereload: true,
    });
    // 自动打开浏览器
    open('http://localhost:3001')
});
//监视文件， 自动执行
gulp.task('myWatch', function () {

    // 监听文件
    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'))
})
//启动开发环境 gulp.series是顺序执行 gulp.parallel是同步执行,gulp start
gulp.task('start', gulp.series(gulp.parallel('myWatch', 'connect')));
// 构建项目，gulp dist
gulp.task('dist', gulp.series('clean', gulp.parallel('html', 'scss', 'css', 'js', 'img')));
// 默认启动开发环境，直接gulp执行
gulp.task('default', gulp.series('start'));

如上，在src中放自己的源码，在dist内放至发布后的代码。
通过gulp或gulp start或gulp dist执行