阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Gulp 制作适合自己的前端脚手架

      新增 .eslintrc.js 文件

      module.exports = {
        "env": {
          "browser": true,
          "es6": true,
          "node": true,
          "jquery": true
        },
        "extends": "eslint:recommended",
        "globals": {
          "Atomics": "readonly",
          "SharedArrayBuffer": "readonly"
        },
        "parserOptions": {
          "ecmaVersion": 2018,
          "sourceType": "module"
        },
        "rules": {
          "no-console": 0,
          "no-cond-assign": 0,
          "no-empty": 0,
          "no-prototype-builtins": 0,
          "no-useless-escape": 0,
          "no-inner-declarations": 0,
          "no-undef": 0,
          "no-unused-vars": 0
        }
      };
      

      设置文件路径

      const CSS = 'style.min.css';                        // 生成总css
      const JS = 'main.min.js';                           // 生成总js
      const PATH = {
        "DIST": "./dist",                                 // 输出文件夹
        "HTML": "./*.html",                               // 查找根下所有html
        "CSS": "./css/*.{css,scss}",                      // 查找根下css
        "JS": "./js/*.js",                                // 查找根下js
        "IMG": "./img/*.{png,jpg,jpeg,gif,bmp,ico}",      // 查找根下img
        "DISTCSS": "./dist/css/",                         // 输出css文件
        "DISTJS": "./dist/js/",                           // 输出js文件
        "DISTIMG": "./dist/img",                          // 输出img文件
        "CSSIMPORT": "!./css/a/.*.scss",                  // 不引入scss文件夹
        "ISCSS": "!./css/" + CSS,                         // 不加载css
        "ISJS": "!./js/" + JS,                            // 不加载js
      };
      

      新增常量配置

      const AUTOPREFIXER = autoprefixer({
        overrideBrowserslist: [
          "> 1%", "last 2 versions", "not ie <= 8"
        ],                                                 // 浏览器兼容
        cascade: false                                     // 是否美化属性值
      });
      const PXTOVIEWPORT = pxtoviewport({
        viewportWidth: 1920,                               // 设计稿宽度
        // viewportHeight: 1080,                           // 设计稿高度
        viewportUnit: 'vw',                                // px转vw
        unitPrecision: 3,                                  // 指定`px`转换为视窗单位值的小数位数
        minPixelValue: 1,                                  // 小于或等于`1px`不转换为视窗单位
        selectorBlackList: ['.ignore', '.hairlines'],      // 指定不转换为视窗单位的类,可以自定义
        mediaQuery: false                                  // 是否在媒体查询转换
      });
      const HTML = {
        removeComments: true,                               //清除HTML注释
        collapseWhitespace: true,                           //压缩HTML
        collapseBooleanAttributes: true,                    //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,                        //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,                   //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,                //删除<style>和<link>的type="text/css"
        minifyJS: true,                                     //压缩页面JS
        minifyCSS: true                                     //压缩页面CSS
      };
      const PROCESSORS = [PXTOVIEWPORT, AUTOPREFIXER, viewportUnits];
      

      Gulp

      gulp 方法

      //图片压缩
      const imageMin = () => {
        return gulp.src(PATH.IMG)
          .pipe(imagemin())
          .pipe(gulp.dest(PATH.DISTIMG));
      };
      //css压缩
      const cssMin = () => {
        return gulp.src([PATH.CSS, PATH.CSSIMPORT, PATH.ISCSS])
          .pipe(sass())
          .pipe(concat(CSS))
          .pipe(postcss(PROCESSORS))
          .pipe(cleanCss())
      };
      // js 检测、转换、合并、压缩公共函数
      const jsMin = () => {
        return gulp.src([PATH.JS, PATH.ISJS])
          .pipe(eslint())
          .pipe(eslint.format())
          .pipe(eslint.failAfterError())
          .pipe(babel({
            presets: ['@babel/env']
          }))
          .pipe(concat(JS))
          .pipe(uglify())
      };
      // html压缩公共函数
      const htmlMin = () => {
        return gulp.src(PATH.HTML)
          .pipe(htmlmin(HTML))
          .pipe(gulp.dest(PATH.DIST));
      };
      

      gulp dev

      //dev任务,用于开发环境
      gulp.task('image:dev', async () => {
        await imageMin().pipe(connect.reload());
      });
      gulp.task('css:dev', async () => {
        await cssMin().pipe(connect.reload())
          .pipe(gulp.dest('./css/'));
      });
      gulp.task('js:dev', async () => {
        await jsMin().pipe(connect.reload())
          .pipe(gulp.dest('./js/'));
      });
      gulp.task('html:dev', async () => {
        await htmlMin().pipe(connect.reload());
      });
      // server任务
      gulp.task('server', async () => {
        await connect.server(
          {
            root: './',
            port: 8080,
            livereload: true
          }
        )
      });
      // watch任务,监听源文件变化,执行对应开发任务
      gulp.task('watch', () => {
        watch([PATH.CSS, PATH.ISCSS], gulp.series('css:dev'));
        watch([PATH.JS, PATH.ISJS], gulp.series('js:dev'));
        watch([PATH.IMG], gulp.series('image:dev'));
        watch([PATH.HTML], gulp.series('html:dev'));
      });
      

      gulp build

      //build任务,用于生产环境
      gulp.task('image:build', async () => {
        await imageMin();
      });
      gulp.task('css:build', async () => {
        await cssMin()
          .pipe(gulp.dest(PATH.DISTCSS));
      });
      gulp.task('js:build', async () => {
        await jsMin()
          .pipe(gulp.dest(PATH.DISTJS));
      });
      gulp.task('html:build', async () => {
        await htmlMin();
      });
      gulp.task('clean', async () => {
        await del([PATH.DIST]);
      });
      //添加版本号
      gulp.task('addVersion', async () => {
        await gulp.src([PATH.DISTCSS + "/*.css", PATH.DISTJS + "/*.js"])
          .pipe(rev())
          .pipe(gulpif('*.css', gulp.dest(PATH.DISTCSS), gulp.dest(PATH.DISTJS)))
          .pipe(rev.manifest())
          .pipe(gulp.dest(PATH.DIST))
      })
      //替换版本号
      gulp.task('upVersion', async () => {
        var manifest = gulp.src(PATH.DIST + '/rev-manifest.json');
        await gulp.src(PATH.HTML)
          .pipe(revReplace({
            manifest: manifest
          }))
          .pipe(useref())
          .pipe(gulp.dest(PATH.DIST))
      });
      // build任务,用于生产环境下打包压缩源代码
      gulp.task('build', gulp.series('clean', gulp.parallel('image:build', 'css:build', 'js:build')))
      

      package.json

      配置开发环境和打包生成生产环境

      • npm run dev 运行开发环境
      • npm run build 运行压缩环境

        "scripts": {
        "dev": "gulp dev",
        "build": "gulp build && gulp addVersion && gulp upVersion && gulp html:build"
        },
        
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录