vs安装插件 05-移动端开发教程-CSS3兼容处理(2)

$ npm i -g gulp

第三步：初始化项目的npm配置文件和初始化安装要gulp和gulp的插件的项目本地插件包。

$ npm init -y     # 初始化项目的npm配置文件
$ npm i -S gulp   # 安装gulp到本地项目（仅开发时使用，S大写）
$ npm i -S gulp-autoprefixer   #  安装gulp-autoprefixer插件（为css3属性添加前缀）
$ npm i -S gulp-rename  # gulp的重命名插件

第四步：在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require(‘gulp‘),     // 引用gulp
  autoprefixer = require(‘gulp-autoprefixer‘), // 添加引用前缀的gulp插件
  rename = require("gulp-rename");  // 引用重命名的gulp插件

gulp.task(‘t1‘, function () {
  gulp.src(‘./css/**/*.css‘)    // 设置要处理的原始的文件位置
    .pipe(autoprefixer())
    .pipe(rename({
      suffix: ".min",           // 添加后缀
      extname: ".css"           // 文件扩展名
    }))
    .pipe(gulp.dest(‘./css/‘)); // 最终文件输出的位置
});

可以根据你的情况修改路径，当前默认是你项目根目录下有个css目录，自动为css目录下面的所有文件自动创建一个*.min.css对应文件，就是最终使用的，这里没有进行压缩，如果需要压缩可以添加gulp的压缩插件。

第五步：接下来在命令终端进入gulpfile.js文件的目录执行

$ gulp t1

可以在项目中看到新生成的文件了。

gulp 文档：地址

sass和less等css的预处理语言配合响应的编译工具也可以实现对css3中的新属性的自动化加前缀处理。后续文章会有介绍，在此不赘述。

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

对应视频地址：https://qtxh.ke.qq.com/

老马qq： 515154084

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-66435-2.html