Gulp前端代码构建工具

最近在学习nodejs express开发网站,接触到很多新东西,Gulp就是其中之一;

Gulp是一个构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。

Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里。
前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子)。

Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。
例如,有些插件可以用来执行JSHint、编译CoffeeScript,执行Mocha测试,甚至更新版本号。

1、Gulp安装

Gulp是基于 Node.js的,故要首先安装 Node.js

$ npm install -g gulp
$ npm install —-save-dev gulp

2、Gulp使用

Gulp的任务都是以插件的形式存在,本次示例以 gulp-jshint 为例,展示Gulp的常规用法。

安装 gulp-jshint

$ npm install gulp-jshint –save-dev

创建 gulpfile.js

gulp项目页 有一个 Sample gulpfile。如果不会写的话,直接参考一下就OK了。

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var paths = {
scripts: 'js/**/*.js',
};
gulp.task('lint', function() {
return gulp.src(paths.scripts)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

然后执行命令行

$ gulp lint


 扫一扫下方二维码,关注我的微信公众号,第一时间获得Android开发进阶文章