vlambda博客
学习文章列表

gulp-postcss //模块打包postcss-load-config //加载 .postcssrc.jsgulp-connect //websock更新文件刷新浏览器gulp-plumber //避免出错task终止minimist // 用于命令行传参数gulp-if // 条件控制输出gulp-newer //增量更新gulp-babel // ES6以上语法转ES5gulp-tinypng-nokey //免key图片压缩opn //打开浏览器del //删除文件夹

cnpm install gulp-postcss postcss-load-config gulp-connect gulp-plumber minimist gulp-if gulp-newer gulp-babel gulp-tinypng-nokey opn del --save

const os = require('os');const net = require('net');const host = showObj(os.networkInterfaces());
const getPort = async function () { const a = await getPortPromise(); console.log(a) return a}
function getPortPromise() { return new Promise((resolve) => { portIsOccupied(1234); function portIsOccupied(port) { // 创建服务并监听该端口 var server = net.createServer().listen(port, host);
 server.on('listening', function () { // 执行这块代码说明端口未被占用 server.close() // 关闭服务 resolve(port) })
 server.on('error', function (err) { if (err.code === 'EADDRINUSE') { // 端口已经被使用 port += 1; portIsOccupied(port); } }) } })}
// 获取本地IP地址function showObj(obj) { for (var devName in obj) { var iface = obj[devName]; for (var i = 0; i < iface.length; i++) { var alias = iface[i]; if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { return alias.address; } } }}
module.exports = { host, getPort}

const { host } = require('./utils');
const Config = { connect: { root: 'dist', //运行目录 livereload: true,  port: 1234, //端口号 host }};
module.exports = Config;

const Config = require('./config');const { getPort } = require('./utils');// 命令行传参数const knownOptions = { string: 'env', default: { env: process.env.NODE_ENV || 'production' }};const options = minimist(process.argv.slice(2), knownOptions);// 检查端口冲突const checkPort = async () => { Config.connect.port = await getPort();};// 开启文件服务器const openServer = async () => await connect.server(Config.connect);// 自动打开浏览器const openBrowser = async () => { const { host, port } = Config.connect; const url = `http://${host}:${port}/view`; opn(url);};

const prodbuild = gulp.series( checkPort, gulp.parallel(openServer, htmls, styles, images, scripts), //并行运行 openBrowser);

cnpm install @babel/core --save

// HTML文件const htmls = () => { return gulp .src('src/view/**/*.html') .pipe(changed('src/view/**/*.html')) .pipe(plumber()) .pipe(gulp.dest('dist/view/')) .pipe(connect.reload());};// CSS文件const styles = () => { return gulp .src('src/css/**/*.styl') .pipe(changed('src/css/**/*.styl')) .pipe(plumber()) .pipe(stylus()) .pipe(cleanCss()) .pipe(gulp.dest('dist/css/')) .pipe(connect.reload());};// 图片文件const images = () => { return gulp .src('src/images/**/*') .pipe(changed('src/images/**/*')) .pipe(plumber()) .pipe(gulp.dest('dist/images/')) .pipe(connect.reload());};// JS文件const scripts = () => { return gulp .src('src/js/**/*.js') .pipe(changed('src/js/**/*.js')) .pipe(plumber()) .pipe(uglify()) .pipe(gulp.dest('dist/js/')) .pipe(connect.reload());};
//检测文件是否有更新const watchFiles = () => { gulp.watch('src/view/**/*.html', htmls); //检测到html文件更新，更新版本号 gulp.watch('src/css/**/*.styl', styles); gulp.watch('src/images/*', images); gulp.watch('src/js/**/*.js', scripts);};

const prodbuild = gulp.series( checkPort, gulp.parallel(openServer, htmls, styles, images, scripts), openBrowser, watchFiles);

// 图片压缩const imgTiny = () => { return gulp .src('src/images/**/*') .pipe(changed('src/images/**/*')) .pipe(tinypng_nokey()) .pipe(gulp.dest('dist/images/')) .pipe(connect.reload());}// JS文件const scripts = () => { return gulp .src('src/js/**/*.js') .pipe(changed('src/js/**/*.js')) .pipe(plumber()) .pipe(babel()) //ES6转换 .pipe(uglify()) .pipe(gulp.dest('dist/js/')) .pipe(connect.reload());};

const prodbuild = gulp.series( checkPort, gulp.parallel(openServer, htmls, styles, imgTiny, scripts), openBrowser, watchFiles);

cnpm install @babel/preset-env --save

{ "presets": [ "@babel/env" ]}

const gulp = require('gulp');const stylus = require('gulp-stylus');const uglify = require('gulp-uglify');const cleanCss = require('gulp-clean-css');const postcss = require('gulp-postcss');const postcssrc = require('postcss-load-config');const connect = require('gulp-connect');const plumber = require('gulp-plumber'); // 避免出错task终止const minimist = require('minimist'); // 用于命令行传参数const gulpif = require('gulp-if'); // 用于命令行传参const cleanCSS = require('gulp-clean-css'); // 缩小css文件const changed = require('gulp-newer'); // 增量更新const babel = require('gulp-babel');const tinypng_nokey = require('gulp-tinypng-nokey'); //压缩图片--免keyconst opn = require('opn'); // 开启浏览器const del = require('del'); // 删除dist文件夹
const { getPort } = require('./utils');const Config = require('./config');// 命令行传参数const knownOptions = { string: 'env', default: { env: process.env.NODE_ENV || 'production' }};const options = minimist(process.argv.slice(2), knownOptions);// 检查端口冲突const checkPort = async () => { Config.connect.port = await getPort();};// 开启文件服务器const openServer = async () => await connect.server(Config.connect);// 自动打开浏览器const openBrowser = async () => { const { host, port } = Config.connect; const url = `http://${host}:${port}/view`; opn(url);};// HTML文件const htmls = () => { return gulp .src('src/view/**/*.html') .pipe(changed('src/view/**/*.html')) .pipe(plumber()) .pipe(gulp.dest('dist/view/')) .pipe(connect.reload());};// CSS文件const styles = () => { return gulp .src('src/css/**/*.styl') .pipe(changed('src/css/**/*.styl')) .pipe(plumber()) .pipe(stylus()) .pipe(gulpif(options.env === 'production', cleanCSS())) .pipe(gulp.dest('dist/css/')) .pipe(connect.reload());};// 图片文件const images = () => { return gulp .src('src/images/**/*') .pipe(changed('src/images/**/*')) .pipe(plumber()) .pipe(gulp.dest('dist/images/')) .pipe(connect.reload());};// 图片压缩const imgTiny = () => { return gulp .src('src/images/**/*') .pipe(changed('src/images/**/*')) .pipe(tinypng_nokey()) .pipe(gulp.dest('dist/images/')) .pipe(connect.reload());}// JS文件const scripts = () => { return gulp .src('src/js/**/*.js') .pipe(changed('src/js/**/*.js')) .pipe(plumber()) .pipe(babel()) //ES6转换 .pipe(gulpif(options.env === 'production', uglify())) .pipe(gulp.dest('dist/js/')) .pipe(connect.reload());};
//检测文件是否有更新const watchFiles = () => { gulp.watch('src/view/**/*.html', htmls); //检测到html文件更新，更新版本号 gulp.watch('src/css/**/*.styl', styles); gulp.watch('src/images/*', images); gulp.watch('src/js/**/*.js', scripts);};// 删除dist目录const clean = () => { return del(['dist']);};// 开发环境-不压缩JS、css和图片const devbuild = gulp.series( checkPort, gulp.parallel(openServer, htmls, styles, imgTiny, scripts), openBrowser, watchFiles);// 生产环境-不运行服务、不开启浏览器、代码压缩和图片压缩const prodbuild = gulp.series( clean, gulp.parallel(htmls, styles, imgTiny, scripts),);gulp.task('dev',devbuild); //开发环境运行命令gulp.task('build', prodbuild); // 生产环境打包命令const build = options.env === 'production' ? prodbuild : devbuild; //判断是开发环境还是生产环境gulp.task('dev',build);

gulp dev --env development //开发环境

gulp dev --env production //生产环境

gulp dev --env build