PostCSS深入学习_ Gulp设置_网站前端开发_前端开发者

网站前端开发_前端开发者css

https://www.rokub.com

PostCSS深入学习: Gulp设置在上一篇文章中, 我们介绍了如何在CodePen和Prepros中使用PostCSS。 虽然里面的选项设置可以让你第一时间接触和使用PostCSS, 但也有很多PostCSS插件限制你不能使用。 这篇教程将告诉你如何在Gulp配置中使用PostCSS插件, 而且可以根据你自己需要的去配置所要的插件。 这才是真正的进入到PostCSS插件生态系统中。 特别声明: 如果你从未接触或使用命令来配置Gulp的任务, 我建议你在阅读本教程之前先阅读前面我写的系列教程:《 网页设计的命令操作》。 需要的条件鉴于我们将需要使用Gulp, 在开始后面的内容之前, 我假设你的电脑本地环境已经具备了下面列出来的条件: 如果你无法确认你的电脑本地系统是否安装了这些, 建议你跟着这篇教程操作一回, 因为这些条件是我们进入教程后面必备条件。 当然你也可以先阅读这篇教程, 确保你对Gulp的基本操作有所了解。 此外, 按照教程中的“ Gulp安装项目” 部分, 确保你的项目文件夹中有以下面所列文件: 一个 gulpfile.js 文件文件 一个 package.json 文件文件 根据项目所需安装依赖模块, 运行 gulp install 会有一个 node_modules 文件夹扩展教程其实这些内容在网上一搜一大把, 为了初学者更好的阅读接下的内容, 这里提供一些参考文档。 PostCSS在Gulp中的基本配置首先在你的项目中创建两个文件夹, 一个命名为 src, 另一个命名为 dest。 src 文件夹用来放置未处理的css文件, 而 dest 用来放置PostCSS插件处理后的文件。 接下来需要做的就是在你的项目中安装gulp – postcss插件, 安装好之后就可以使用POstCSS处理器。 在安装之前, 配置一下 package.json 文件: {

“name”: “testPostCSS”,
“version”: “0.0.1”,
“description”: “test PostCSS gulp plugin”,
“keywords”: [“gulpplugin”,”PostCSS”,”css”],
“author”: “damo”,
“license”: “MIT”,
“dependencies”: {
“postcss”: “^5.0.0”,
“gulp”: “~3.8.10”
},
“devDependencies”: {
“gulp-postcss”: “^6.0.1”
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 {
“name”: “testPostCSS”,
“version”: “0.0.1”,
“description”: “test PostCSS gulp plugin”,
“keywords”: [“gulpplugin”,”PostCSS”,”css”],
“author”: “damo”,
“license”: “MIT”,
“dependencies”: {
“postcss”: “^5.0.0”,
“gulp”: “~3.8.10”
},
“devDependencies”: {
“gulp-postcss”: “^6.0.1”
}
}
打开你的命令终端, 并且进入到你的项目根目录下, 然后在命令终端输入下面的命令: npm install–save – dev gulp – postcss 1 npm install–save – dev gulp – postcss注: 如果上面命令无法正常安装, 建议在上面的命令前加上 sudo: sudo install–save – dev gulp – postcss 1 sudo install–save – dev gulp – postcss运行完上面命令之后, 如果没出任何差错, 在你的终端命令中可以看到类似下图的提示: 安装完成后你的项目结构看起来就应该像这样: 现在通过编辑器打开 gulpfile.js 文件, 并且创建 gulp 和 gulp – postcss 变量, 如下面代码所示:
var gulp = require(‘gulp’);
var postcss = require(‘gulp-postcss’);
1 2
var gulp = require(‘gulp’);
var postcss = require(‘gulp-postcss’);
我们现在可以设置一个任务, 让PostCSS读取CSS原文件并且处理它。 添加的代码如下: gulp.task(‘css’, function () {
varprocessors= [];
returngulp.src(‘./src/*.css’).pipe(postcss(processors)).pipe(gulp.dest(‘./dest’));
});
1 2 3 4 5 6 7 gulp.task(‘css’, function () {
varprocessors= [];
returngulp.src(‘./src/*.css’).pipe(postcss(processors)).pipe(gulp.dest(‘./dest’));
});
我们一起来看一下上在的代码。 在第一行, 设置了一个任务名叫 css。 这个任务将会执行一个函数, 同时在这个函数中创建了一个名为 processors 的数组。 现在这个数组为空, 这里将插入我们想使用的PostCSS插件。 在 processors 数组后面, 我们指定了需要处理的目标文件, 即 src 目录中的任何CSS文件。 这里面使用了两个.pipe() 函数, 设置 postcss() 执行PostCSS, 并且给 postcss() 传递 processors 参数, 后面会告诉PostCSS要使用哪个插件。 接下来的第二个.pipe() 函数, 指定结过PostCSS处理后的CSS放置在 dest 文件夹中。 测试编译在 src 目录中创建一个测试文件 style.css, 并在这个文件中添加一些CSS的测试代码:.test {
background: black;
}
1 2 3.test {
background: black;
}
现在在命令终端的项目目录下执行下面的命令: gulp css 1 2 gulp css这是刚才设置的任务, 执行完上面的任务之后, 在 dest 目录中可以找到一个新的 style.css 文件。 当你打开这个新文件后, 你可以看到和你的源文件一样的代码。 使用的代码并没有任何的改变, 那是因为我们还没有使用任何的PostCSS插件。 从先前的教程中, 你就会知道它的插件实际上是会对CSS执行操作的。 添加PostCSS插件现在我们添加需要的PostCSS插件: Autoprefixer(处理浏览器私有前缀), cssnext(使用CSS未来的语法), precss(像Sass的函数)。 运行下面的命令, 将插件安装到你的项目: npm install autoprefixer–save – dev npm install cssnext–save – dev npm install precss–save – dev 1 2 3 4 npm install autoprefixer–save – dev npm install cssnext–save – dev npm install precss–save – dev其实也可以在命令中执行下面的代码, 也可以达到相同的效果: npm install autoprefixer cssnext precss–save – dev 1 npm install autoprefixer cssnext precss–save – dev注: 安装 cssnext 和 precss 时需要一段时间, 因为他们包括了多个插件。 接下来, 在我们的项目中定义变量, 将这些插件加载到我们的项目中。 和前面的方式一样, 在 gulpfile.js 文件中添加下面的代码:
var autoprefixer = require(‘autoprefixer’);
var cssnext = require(‘cssnext’);
var precss = require(‘precss’);
1 2 3
var autoprefixer = require(‘autoprefixer’);
var cssnext = require(‘cssnext’);
var precss = require(‘precss’);
然后将这三个插件添加到 processors 数组中, 更新后的数组如下:
var processors = [autoprefixer, cssnext, precss];
1 2 3 4 5
var processors = [autoprefixer, cssnext, precss];
三个插件已结添加到了 processors 数组中了, 这个时候PostCSS会知道将这些插件功能应用到我们的CSS源文件中。 我们现在可以给 src / style.css 文件中添加一些测试文件和检测他们的工作。 删除测试文件中以前的代码, 并添加新的CSS样式代码: /* Testing autoprefixer */ .autoprefixer {
display: flex;
}/* Testing cssnext */.cssnext{
background: color(redalpha(-10% ));
}/* Testing precss */.precss{< ahref=’http://www.jobbole.com/members/jinyi7016′> @if < /a> 3 < 5 { background: green; } @else { background: blue; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 / * Testing autoprefixer * / . autoprefixer { display : flex ; } / * Testing cssnext * / . cssnext { background : color ( redalpha ( -10% ) ) ; } / * Testing precss * / . precss { < ahref=’http:/ / www.jobbole.com / members / jinyi7016 ‘> @ if < / a > 3 < 5 { background : green ; } @ else { background : blue ; } }在命令终端执行 gulp css 命令。在 dest 目录生成的文件会有下面的代码:/* Testing autoprefixer */ .autoprefixer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* Testing cssnext */ .cssnext { background: rgba(255, 0, 0, 0.9); } /* Testing precss */ .precss { background: green } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* Testing autoprefixer */ . autoprefixer { display : -webkit-box ; display : -webkit-flex ; display : -ms-flexbox ; display : flex ; } /* Testing cssnext */ . cssnext { background : rgba ( 255 , 0 , 0 , 0.9 ) ; } /* Testing precss */ . precss { background : green }如上面编译出来的代码你应该看到了Autoprefixer给需要的属性添加了浏览器的私有前缀,第二个任务cssnext将颜色转换成 rgba() ,第三部分PreCSS检查了 @if @else ,编译符合需求的代码。设置插件的选项注:如果你想为一个插件配置选项参数,你可以在插件后面添加一对括号,并在里面传递选项的参数。例如,Autoprefixer需要指定对应的浏览器列表参数,你可以像这样设置:var processors = [ autoprefixer({browsers: [‘
last 1 version ‘]}), cssnext, precss ]; 1 2 3 4 5 var processors = [ autoprefixer ( { browsers : [ ‘
last 1 version ‘ ] } ) , cssnext , precss ] ;分享你的项目PostCSS最美之处就是可以将插件根据自己的需要做任意的组合。这对于确保其他的人希望在一个项目中有相同的PostCSS插件设置时,就提出了一个很大的挑战。这得感谢 npm ,我们可以通过他来管理插件依赖关系。因为我们安装插件到项目中使用了 –save-dev 标志,在安装时会自动将依赖文件写入项目的 package.json 文件中。这意味着如果你想和他人分享你的项目,他们可能在命令终端运行 npm install 命令,就可以自动安装分享的插件。有关于更多关于 npm 依赖关系管理的信息,你可以点击这里进行更多的了解。
来总结一下接下来做个简单的总结:通过 npm 创建项目,并且将 gulp 安装到 gulpfile 文件创建项目,并且将 安装到 文件 安装 gulp-postcss 插件插件 设置你的 gulpfile.js 文件,将 gulp 和 gulp-postcss 加载到项目中文件,将 和 加载到项目中 创建一个任务,来编译你的CSS在任务中,设置一个 processors 数组数组 在 .pipe() 是设置一个 postcss() 函数,并且将 processors 传递给它你可以根据上面的教程介绍,遵循相同的步骤,你可以将PostCSS任何插件安装到项目中。
通过 npm install <plugin_name> –save-dev 命令将插件安装到你的项目中–save-dev 命令将插件安装到你的项目中 类似 var autoprefixer = require(“autoprefixer”) 代码在你的 gulpfile.js 文件中定义要加载的插件变量名代码在你的 文件中定义要加载的插件变量名 将变量名添加到你的 preprocessors 数组中。

网站前端开发_前端开发者丨CSS

https://www.rokub.com

» 本文来自:前端开发者 » 《PostCSS深入学习_ Gulp设置_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2449.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!