一、进入package.json 文件
1、下载所需的插件
{
"name": "test_gulp",
"version": "1.0.0",
"description": "xiangge_first_gulp",
"main": "index.js",
"scripts": {},
"author": "xiangge",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-htmlmin": "^5.0.1",
"gulp-less": "^4.0.1",
"gulp-load-plugins": "^2.0.2",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2",
"open": "^7.0.3"
}
}
二、进入gulpfile.js 文件
const { src, dest, parallel, series, watch } = require("gulp");
const $ = require('gulp-load-plugins')();
const open = require('open');
const js = function() {
return src('src/js/**/*.js')
.pipe($.concat('common.js'))
.pipe($.babel({
presets: ['@babel/env']
}))
.pipe(dest('dist/js/'))
.pipe($.uglify())
.pipe($.rename({suffix: '.min'}))
.pipe(dest('dist/js/'))
.pipe($.connect.reload())
};
const less_fuc = function () {
return src('src/less/**/*.less')
.pipe($.less())
.pipe(dest('src/css/less'))
.pipe($.connect.reload())
};
const css = function () {
return src('src/css/**/*.css')
.pipe($.concat('index.css'))
.pipe(dest('dist/css/'))
.pipe($.cleanCss())
.pipe($.rename({suffix: '.min'}))
.pipe(dest('dist/css/'))
.pipe($.connect.reload())
};
const html = function () {
return src('index.html')
.pipe($.htmlmin({collapseWhitespace: true}))
.pipe(dest('dist/'))
.pipe($.connect.reload())
};
const server = function() {
return $.connect.server({
root: 'dist/',
livereload: true,
port: 8001
});
}
const openUrl = function () {
return open(`http://localhost:8001`)
}
const watch_fun = function () {
return (
watch(['src/**/*.js'], parallel(js)),
watch(['src/**/*.css'], parallel(css)),
watch(['src/**/*.less'], series(less_fuc, css)),
watch(['src/**/*.html', 'index.html'], parallel(html))
)
}
exports.js = js
exports.less = less_fuc
exports.css = css
exports.default =
series(
parallel(
js,
series(less_fuc, css),
html
),
openUrl,
parallel(
watch_fun,
server
)
)
三、文件目录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5496fcc2d1dd4e8ce9092f490776318a.png)
-------- 感兴趣可以进入我的小屋瞅瞅,后面会更新很多大家关心的东西点击我