7.gulpfile.js模块化及Gulp错误中断处理

gulpfile.js模块化:

随着项目开发过程的深入,我们会发现gulfile.js文件变成了一个巨大的单一文件。其中充斥着引入的gulp插件,设置的gulp任务和各种gulp监听器等等。这些逻辑代码混杂在同一个文件中非常不利于后期的维护,所以模块化gulpfile.js文件是非常有必要的。

其实模块化gulfile.js文件也很简单,只需要将不同的任务代码和监听代码分离到不同的js文件中,然后全部通过require的方式引入到gulpfile.js文件中即可。比如一个原本的gulpfile.js文件如下:

var gulp = require("gulp"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssvars = require("postcss-simple-vars"),
nested = require("postcss-nested"),
cssImport = require("postcss-import"),
watch = require("gulp-watch"),
browserSync = require("browser-sync").create();  

gulp.task("styles",function(){ 
	return gulp.src("./app/assets/styles/styles.css")
		.pipe(postcss([cssImport,cssvars,autoprefixer,nested]))
		.pipe(gulp.dest("./app/temp/styles"));
});

gulp.task("watch",function(){ 
	browserSync.init({
		notify:false,
		server:{
			baseDir:"app"
		}
	});
	
	watch("./app/index.html",function(){ 
		browserSync.reload();
	});

	watch("./app/assets/styles/**/*.css",function(){ 
		gulp.start("cssInject");
	});
});

gulp.task("cssInject",["styles"],function(){
	return gulp.src("./app/temp/styles/styles.css")
	.pipe(browserSync.stream());
});

此时,我们可以在gulpfile.js文件所在的目录下创建一个gulp文件及一个子文件tasks,然后在tasks中分别创建两个js文件:styles.js和watch.js:

(1)styles.js文件:

var gulp = require("gulp"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssvars = require("postcss-simple-vars"),
nested = require("postcss-nested"),
cssImport = require("postcss-import");


gulp.task("styles",function(){ 
	return gulp.src("./app/assets/styles/styles.css")
		.pipe(postcss([cssImport,cssvars,autoprefixer,nested]))
		.pipe(gulp.dest("./app/temp/styles"));
});

(2)watch.js文件:

var gulp = require("gulp"),
watch = require("gulp-watch"),
browserSync = require("browser-sync").create();  

gulp.task("watch",function(){ 
	browserSync.init({
		notify:false,
		server:{
			baseDir:"app"
		}
	});
	
	watch("./app/index.html",function(){ 
		browserSync.reload();
	});

	watch("./app/assets/styles/**/*.css",function(){ 
		gulp.start("cssInject");
	});
});

gulp.task("cssInject",["styles"],function(){
	return gulp.src("./app/temp/styles/styles.css")
	.pipe(browserSync.stream());
});

最终在gulpfile.js文件中引入这些文件即可,gulpfile.js文件中:

require("./gulp/tasks/styles.js");
require("./gulp/tasks/watch.js");

最后,gulp watch查看结果,一切正常。这个例子中的gulpfile.js文件可能不大,但是当我们在开发大型项目时,模块化gulpfile.js文件就十分有必要了。

Gulp错误中断处理:

当我们在项目开发过程中,往往gulp监听器会一直在后台开着,以便实时同步代码更新到浏览器中。此时,如果项目中的某个文件出错了,比如我们在书写某个CSS样式的代码时,手抖了出现了一个简单的CSS语法错误,然后我们保存想要查看运行结果。此时命令行中必然会报出一个错误,同时gulp监听器停止运行。此时我们必须review我们的代码,然后手动在控制台重启监听器gulp watch,这是一个很普遍也很让人懊恼的事情。其实,我们更希望gulp监听器在命令行中报出一个错误信息,然后继续自动监听内容,等我们修改bug后保存,一切又恢复正常。而不是一出现错误,监听器就退出。

为了达到这个目的我们可以在我们的gulp任务中,去监听错误,然后用一个回调函数去处理这个错误(比如打印错误信息到命令行中),这样gulp监听器也就不会自动退出了,例子如下:

gulp.task("styles",function(){ 
	return gulp.src("./app/assets/styles/styles.css")
		.pipe(postcss([cssImport,cssvars,autoprefixer,nested]))
		.on("error",function(errorMessage){ 
			//打印错误信息,以便于我们对其进行修改,至于为何使用toString()是为了能够更好的在命令行中显示错误信息。
			console.log(errorMessage.toString());
			//告知gulp,出现错误,终止当前任务的执行(但是gulp监听器会继续运行),传递end事件给gulp
			this.emit("end");
		})
		.pipe(gulp.dest("./app/temp/styles"));
});

这样,当我们的某个css文件出现错误的时候,会立即触发error事件,然后执行相应的回调。gulp会告知我们错误的位置,并终止当前任务的执行。但gulp监听器会保持监听状态,因为错误已经被捕获并进行了相应的处理。

当出现错误时,命令行中的结果如下:

[17:55:17] Starting 'styles'...
CssSyntaxError in plugin 'gulp-postcss'
Message:
    postcss-simple-vars: C:\Users\Irrisitable\Desktop\site\travel-site-files\app\assets\styles\modules\_large-hero.css:5:9: Undefined variable $lallaa

  3 |
  4 |     &__text-content {
> 5 |         color:$lallaa;
    |         ^
  6 |         position: absolute;
  7 |         top: 50%;

[17:55:17] Finished 'styles' after 80 ms
[17:55:17] Starting 'cssInject'...
[Browsersync] 1 file changed (styles.css)
[17:55:17] Finished 'cssInject' after 8.85 ms

修改错误,保存,继续监听,一切正常!

发表评论

电子邮件地址不会被公开。 必填项已用*标注