gulp的基础配置

安装以下依赖包

 const gulp = require("gulp")  // 引入 gulp
const del = require('del'); // 引入 删除
const htmlmin = require('gulp-htmlmin'); // html 压缩
const uglify = require('gulp-uglify'); // js 压缩
const cssnano = require('gulp-cssnano'); // css 压缩
const sass = require('gulp-sass')(require('sass')); // sass 转换
const postcss = require('gulp-postcss'); // css 转换
const pxtoviewport = require('postcss-px-to-viewport');// px 转 vw
const autoprefixer = require('gulp-autoprefixer'); // css 前缀
const sourcemaps = require('gulp-sourcemaps'); // 源图
const imagemin = require('gulp-imagemin'); // 图片压缩
const cache = require('gulp-cache'); // 监听更改的 img  

配置输出 及监听

// html 输出
gulp.task('htmlcompress', () => {
    // html 压缩配置
    const options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: false,//压缩HTML
        minifyJS: false,//压缩页面JS
        minifyCSS: false//压缩页面CSS
    }
    return gulp.src('src/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest("dist"));

});

// js 输出
gulp.task('jscompress', () => {
    return gulp.src(["src/js/**/*.{js,json}"])
        .pipe(sourcemaps.init())
        // .pipe(uglify())
        .pipe(sourcemaps.write('.', { includeContent: false }))
        .pipe(gulp.dest("dist/./js"));
});

// scss 转换 css 
gulp.task('scsstocss', () => {
    return gulp.src(['src/style/**/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest('src/style'));
});

// px 转换 vm 
gulp.task('pxtovw', function () {
    // px 转换 vw 配置
    let processors = [
        pxtoviewport({
            unitToConvert: 'px',  // 要转化的单位
            viewportWidth: 1920, //  UI设计稿的宽度
            // viewportHeight: 1080,
            unitPrecision: 2, //  转换后的精度，即小数点位数
            viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            landscape: false // 是否处理横屏情况
        })
    ];
    return gulp.src(['src/style/**/*.css'])
        .pipe(sourcemaps.init())
        .pipe(postcss(processors)) // css 转换
        // .pipe(autoprefixer({
        //     overrideBrowserslist: ['> 1%', 'last 2 versions', 'Firefox ESR'], // 重要配置 详见下面
        //     cascade: false //  是否美化属性值
        // }))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.', { includeContent: false }))
        .pipe(gulp.dest("dist/./style")); // css 输出位置
});

//img 输出 压缩 
gulp.task('imgcompress', () => {
    return gulp.src(['src/images/**/*.{png,jpg,gif,ico,webp}'])
        // .pipe(cache(imagemin({
        //     progressive: true,
        //     svgoPlugins: [{ removeViewBox: false }],
        // })))
        .pipe(imagemin())
        .pipe(gulp.dest("dist/./images"));
});

// 第三方插件
gulp.task('pluginspackages', () => {
    return gulp.src(['src/packages/**'])
        .pipe(gulp.dest("dist/./packages"));
});

// 删除
gulp.task('cleandist', function () {
    return del([
        // 删除 dist 下所有
        'dist/images',
        'dist/js',
        'dist/style',
        'dist/*.html',
        // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
        // 'dist/mobile/**/*',
        // 我们不希望删掉这个文件，所以我们取反这个匹配模式
        // '!dist/mobile/deploy.json'
    ]);
});

//  watch 监听
gulp.task('watchall', () => {
    gulp.watch('src/*.html', { ignoreInitial: false }, gulp.parallel(["htmlcompress"]));
    gulp.watch('src/**/*', { ignoreInitial: false }, gulp.parallel(["jscompress"]));
    gulp.watch('src/**/*.css', { ignoreInitial: false }, gulp.parallel(["pxtovw"]));
    gulp.watch('src/**/*.scss', { ignoreInitial: false }, gulp.parallel(["scsstocss"]));
    gulp.watch('src/images/**', { ignoreInitial: false }, gulp.parallel(["imgcompress"]));
    gulp.watch('src/packages/**', { ignoreInitial: false }, gulp.parallel(["pluginspackages"]));
})

// 先删除 已有的文件夹 在创建新的文件夹
gulp.task("default", gulp.series('cleandist', gulp.parallel(['watchall'])))

目录结构

• gulp—7 文件包
• dist 生成的文件
• node_modules 依赖包
• src 项目文件包
  • images 图片资源
  • js 事件函数
  • packages 第三方插件库
  • style css资源
  • index.html html 资源(所有html都暴露在外)
• gulpfile 配置文件
• package.json 包管理器

运行命令： gulp

结束： ctrl+c

首次运行会直接生成dist 文件 gulp后src资源更改后 dist资源也相应的更改 查看效果 运行dist里面的.html文件

// 图片压缩  cnpm install --save-dev gulp-imagemin@7.0.0
// css 压缩  cnpm install gulp-cssnano --save-dev
// js 压缩  cnpm  install gulp-uglify --save-dev      
// js 合并  cnpm  install gulp-concat  --save-dev
// html 压缩 cnpm install --save gulp-htmlmin
// scss 转换 cnpm install sass gulp-sass --save-dev
// 文件重命名 cnpm  install gulp-rename  --save-dev  
// 刷新 cnpm install --save-dev gulp-connect
// px转vw配置  cnpm install postcss-px-to-viewport --save-dev
// px转vw包  npm install --save-dev postcss gulp-postcss
// 删除文件 cnpm install --save-dev gulp del
// 源图 cnpm install --save-dev gulp-sourcemaps
// babel cnpm install --save-dev gulp-babel@7 babel-core babel-preset-env
// css 前缀 cnpm install --save-dev gulp-autoprefixer
// 往页面中动态插入css js  cnpm install --save-dev gulp-html-replace
// 公共html代码复用 npm install gulp-file-include --save-dev