一,前言。
一开始学习web编程时,在改了某个html或是css或是js文件之后如果想要看效果,我们通常会手动刷新浏览器。之后学了后端编程更是麻烦,还得在命令行中输入node app.js
然后再刷新浏览器才能看到效果。这对于开发来说效率非常低。
同时在web编程中,往往我们并没有直接写html,css,js文件,而是写一些需要编译的,但语义更好或是更加简洁的jade,scss,ls文件。这就需要我们编写一些代码对这些文件进行编译。gulp工具就能够充当这样的角色。
然而gulp的功能远多于此,这得得益于许多程序员造的gulp包。而其中就包括了能够帮助web开发人员在开发过程中自动启动服务端的gulp-nodemon包以及自动刷新浏览器的browser-sync包。
二,编写gulp文件。
使用gulp的时候,最重要的是在主目录之下编写gulpfile文件。因为我们在命令行中输入的每一条gulp命令,都必须要在gulpfile中有定义才能够顺利执行。一个gulpfile文件的例子如下:
'user strict'
var gulp = require('gulp'),
wrench = require('wrench'),
clean = require('gulp-clean');
wrench.readdirSyncRecursive('./gulp').filter(function(file){
return (/\.js/).test(file);
}).map(function(file){
require('./gulp/' + file);
});
gulp.task('clean', function(){
return gulp.src('./tmp')
.pipe(clean());
});
以上代码主要是实现将主目录的gulp目录中的js
文件引入到gulpfile文件中。其中的包 wrench
现在已经不被维护了,但是包中的方法readdirSyncRecursive
方法仍可用。这个方法是用来读取 ./gulp
目录下的下的 js
文件 。这样在 ./gulp
目录下 js
文件中定义的gulp方法就能被引入到gulpfile文件之中,进而能在命令行中被调用。
此外该gulpfile中还定义了一个 clean
方法,用于将指定目录下的文件删除掉。
接着再看一下 ./gulp
的目录结构:
其中的 build.js
, scripts.js
, styles.js
分别是用来编译jade
, livescript
, scss
文件的。而 inject.js
则是用来将需要的css
,js
文件加载进 html
相应的地方。具体的插入方法可以看gulp-inject
包的介绍。gulp-inject
三,用于自启动服务器的gulp-nodemon包。
npm包 gulp-nodemon
和npm包 nodemon
的功能差不多一样,只是支持了与gulp的结合。根据npm包nodemon
官网的介绍,nodemon
的作用类似于 node
。我们通常在命令行中输入 node app.js
就能启动某个本地的服务器(app.js 是某个文件名,名字由程序员决定)。如果我们输入 nodemon app.js
同样也能启动。不同的是,nodemon
能够检测 app.js
所在目录下的文件,如果有改变,就会自动重新启动 app.js
。而gulp-nodemon
包的使用也类似的,代码如下:
'use strict'
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
gulp.task('nodemon', ['inject'], function(cb) {
var started = false;
return nodemon({
script: 'app.js'
}).on('start', function() {
if (!started) {
cb();
started = true;
}
});
});
传给 nodemon
的参数 script: 'app.js
指明将要本地服务器的入口。之后和 app.js
同一个目录下的文件一有改变,本地服务器就会被重启。
nodemon
包与 gulp-nodemon
包官网资料分别是:nodemon,gulp-nodemon
。
四,用于自动刷新浏览器的browser-sync包。
npm包browser-sync
能够在本地服务器启动完成时自动帮我们打开浏览器,并且在相应的 jade
,livescript
,scss
文件改变时自动刷新浏览器。server.js
具体的代码如下:
use strict'
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('serve', ['nodemon'], function(){
browserSync.init({
proxy: 'http://localhost:3000',
browser: 'chrome',
port: 7000
});
gulp.watch('public/**/*.+(scss|jade|ls)', ['inject'])
.on('change', browserSync.reload);
});
代码最后的gulp.watch
就是用来监测我们编写的jade
,livescript
,scss
文件,如果有任何的改变,就执行inject
任务,即先对包括有改变的文件的所有文件进行编译在进行css
以及javascript
的注入。
npm包browser-sync
的官网是:browser-sync。
附上搭建好的一个简单环境:github地址。