Gulp的自动化编译PostCss

Gulp能够自动执行task定义的事务，但是我们每次调用一次事务，事务也就执行一次，这样我们每次都必须手动去执行一次，就显得很繁琐。
以移动app开发为例，我们在编写app的css时，诸如px的转化问题就很头疼，好在有好用的插件可以完成转化。我们可以通过postcss支持的插件来帮助我们简化工作
首先需要在工程中安装

gulp  install gulp-load-plugins --save-dev

然后我们就能在gulpfile.js文件中使用它，gulp-load-plugins中有许多有用的插件

var plugins = require('gulp-load-plugins')();
var postcss = plugins.postcss;
var sourcemaps = plugins.sourcemaps;
var gulp = require('gulp');gulp.task("postcss",function(){var setting = {rootValue: 100,propList: ['*'],};gulp.src("css/*.css",{base:"./static"})//base可以定义开始文件的路径.pipe(plugins.rename({ suffix: '.cmp' }))  //生成新文件的前缀.pipe(sourcemaps.init()) //解决编译后文件后编译前文件的映射关系，//方便调试的时候定位到源代码的出错位置，这里是标记 map 记录始发点.pipe(postcss([ autoprefixer(), pxtorem(setting)]))//postcss接收一个数组参数，//数组中需要使用的编译插件，//第一个插件是处理浏览器私有前缀的，后者是px向rem的转化，.pipe(sourcemaps.write('.'))//输出.map文件.pipe(gulp.dest(config.source));//输出编译后的css,文件路径是base+dest
})

现在我们已经定义好了一个可以进行编译任务的task, 只要gulp task就能执行，但是这样每次修改css，都必须重新编译，所以最好能够gulp自己监听到改变就自动调用postcss任务，好在gulp提供了gulp-watch和gulp-batch插件来完成这一功能，当然直接使用gulp-load-plugins中的watch插件更加简单

'use strict';var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var postcss = plugins.postcss;
var sourcemaps = plugins.sourcemaps;
// var watch = plugins.watch;
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var pxtorem = require('postcss-pxtorem');
var autoprefixer = require('autoprefixer');gulp.task('watchcss',function(){var setting = {rootValue: 100,propList: ['*'],};watch(list,batch(function (events, done) {gulp.start('postcss', done)}));});
gulp.task('postcss', function () {gulp.src(list).pipe(plugins.rename({ suffix: '.cmp' })).pipe(sourcemaps.init()).pipe(postcss([ autoprefixer(), pxtorem(setting)])).pipe(sourcemaps.write('.')).pipe(gulp.dest(config.source+"/css"));
});

或者

ulp.task('postcss', function () {var setting = {rootValue: 100,propList: ['*'],};//var list = config.taskResource.cssFiles.filter(function (val) {//return val.indexOf('.min') === -1      //判断是否被压缩过//});return watch(list, options).pipe(plugins.rename({ suffix: '.cmp' })).pipe(sourcemaps.init()).pipe(postcss([ autoprefixer(), pxtorem(setting)])).pipe(sourcemaps.write('.')).pipe(gulp.dest(config.source));
});

这样修改css文件后就能自动编译，但是修改代码总是出一些bug，这时候编译器可能就会出错，这时候就会自动退出编译，这对我们来说是很难受的，因为你并不知道什么时候出错，这个功能就停止了，所以我们在编译出错后仍能继续重新编译。
我们有几种方法，第一种处理编译出错的情况继续编译，只要添加on函数监听错误，然后处理就行

gulp.task('less', function() {  return  gulp.src(list).pipe(plugins.rename({ suffix: '.cmp' })).pipe(sourcemaps.init()).pipe(postcss([ autoprefixer(), pxtorem(setting)])).on('error', function(err){console.log(err.message);//gutil.log('Less Error!', err.message);  //使用 gulp-util 只是使错误日志格式与 gulp 的日志保持一致this.emit('end');}).pipe(sourcemaps.write('.')).pipe(gulp.dest(config.source+"/css"));
});

此时后面就能继续pipe()
当然这种方法很是麻烦，需要在每个可能编译出错的地方都添加这个监听，所以可以使用gulp-plumber。gulp-plumber 可以阻止 gulp 插件发生错误导致进程退出并输出错误日志。

gulp.task('less', function() {  return  gulp.src(list).pipe(plumber()).pipe(plugins.rename({ suffix: '.cmp' })).pipe(sourcemaps.init()).pipe(postcss([ autoprefixer(), pxtorem(setting)])).pipe(sourcemaps.write('.')).pipe(gulp.dest(config.source+"/css"));
});

这样只要在开头添加就行了，到这里Gulp的自动化编译就完成了

Gulp的自动化编译PostCss相关推荐

使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件
使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件按照gulp需求插件安装browser-sync(在命令行中输入) npm install --save-dev ...
利用gulp搭建less编译环境
什么是less? 一种动态样式语言. LESS 将 CSS 赋予了动态语言的特性,如变量, 继承, 运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Fi ...
vsts~CI/CD实现自动化编译
打开你的vs online,选择build and release标签,进行自动化编译的开发. 一新建,选择对应的源代码管理,我们以VSTS-GIT为例二选择你的项目所应对的开发框架,如.net ...
android package.xml,Android自动化编译设置AndroidManifest.xml中package值（包名）
手动修改Android的AndroidManifest.xml中package值(包名)很简单,手动修改即可.但是项目中需要把Android的项目源代码放到服务器端在客户下载时候动态编译生成,且生成的 ...
（转）iOS编程高性能之路－自动化编译脚本（1）
入门自动化编译脚本在网上已经有很多了,当然好处也是显而易见,可以让我们脱离xcode ide的编译,当然对于需要编译打包多个应用优势就很明显,避免了我们人为操作可能的出错,和机械重复的枯燥. 自动化 ...
gulp——用自动化构建工具增强你的工作流程
gulp概念之前有写了webpack, 现在重新写gulp感觉二者最终结果虽说相差无几,但是侧重点还是有所不同 webpack更偏向于工程化,gulp侧重于项目的整个流程控制,你可以二者结合,也可以 ...
java 自动化编译_构建Jenkins自动化编译管理环境
今天研究了一下Jenkins,有了一个粗浅的认识,顺手把构建的过程说一下,后续慢慢补充: (1)Secure CRT 连接到Linux服务器要注意的一点是,要搞好一个文件传输的路子,否则不好传东西. ...
安卓apk在CentOS上自动化编译打包发布
安卓apk在CentOS上自动化编译打包发布如果你还在手动 clean ->build ->上传apk到OSS ->执行app更新操作... *本文不含三方加固等操作!!! ...
使用devenv实现自动化编译VS工程
Devenv命令 devenv命令是VS系列编译器的exe名称,执行devenv.exe可以启动带界面的VS编译器.若需要使用命令行方式的编译器,需要使用devenv或者devenv.com. 我们可 ...

Gulp的自动化编译PostCss

Gulp的自动化编译PostCss相关推荐

最新文章

热门文章