使用gulp搭建自动化web前端工具

发表于   |  

为何要使用gulp？

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理；利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作；Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作；通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

安装gulp

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

1
npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

1
npm install gulp --save-dev

实例操作

首先创建一个文件夹（test），里面创建两个文件，文件名分别为package.json，gulp.js(参照官网)；

package.json

1
2
3
4
5
6
{
  "name": "project-gulp",
  "version": "0.1.0",
  "devDependencies": {
  }
}

gulpfile.js

1
2
3
4
5
var gulp = require('gulp');
gulp.task('default', function() {
  ..code
});

安装gulp 和 gulp插件

安装gulp

1
npm install gulp --save-dev

–save-dev 方法可以在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项

安装插件

  • gulp-uglify：压缩js代码
  • gulp-concat：合并js文件
  • gulp-load-plugins：自动加载插件
  • gulp-jshint：js代码检查
  • gulp-rename：重命名

分别执行下面的命令

1
2
3
4
5
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
npm install gulp-load-plugins --save-dev
npm install gulp-jshint --save-dev
npm install gulp-rename --save-dev

创建两个目录src和build

1
2
mkdir src
mkdir build

在src目录里面下面创建两个js文件，index.js和main.js，随便写点js代码如下

1
2
3
4
5
6
var ex = function() {
	var d = 0;
	return d + 1; 
};
ex();
1
2
3
4
5
6
7
var a = 0;
var b = 1;
for(var i = 0; i < 10; i++){
	var c = a + b + i ;
	console.log(c);
}

配置gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('scripts', function() {
  return gulp.src('src/*.js')
    .pipe(plugins.jshint('.jshintrc'))
    .pipe(plugins.jshint.reporter())//输出检查结果
    .pipe(plugins.concat('libs.js')) //合并后的文件名
    .pipe(gulp.dest('build')) //合并后文件的位置
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.uglify())//压缩
    .pipe(gulp.dest('build'))
});
gulp.task('default', function() {
  gulp.start('scripts');
});
gulp.watch('src/*.js',['scripts']);

执行命令

1
gulp

此时会生成两个文件 libs.js和 libs.min.js,而且会实时监控index和mian两个文件，如果有变化会检查语法是否有错误，是否执行合并和压缩

1
2
3
4
5
6
[16:28:40] Using gulpfile D:\构建工具\gulp\gulpfile.js
[16:28:40] Starting 'default'...
[16:28:40] Starting 'scripts'...
[16:28:41] Finished 'default' after 566 ms
[16:28:41] Finished 'scripts' after 787 ms