gulp构建前端自动化

目前最知名的构建工具: GulpGruntNPM + Webpack

grunt是前端工程化的先驱
gulp更自然基于流的方式连接任务
Webpack最年轻,擅长用于依赖管理,配置稍较复杂
推荐使用GulpGulp基于nodejsstream,效率更好语法更自然,不需要编写复杂的配置文件

基础安装
Gulp是基于Node.js的,需要要安装Node.js
1、为了确保依赖环境正确,我们先执行几个简单的命令检查。

1
2
leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ node -v
v4.2.6

Node是一个基于Google V8引擎建立的一个解释器
检测Node是否已经安装,如果正确安装的话你会看到所安装的Node的版本号
2、接下来看看npm,它是node的包管理工具,可以利用它安装gulp所需的包

1
2
leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ npm -v
3.5.2

这同样能得到npm的版本号,装Node时已经自动安装了npm

3、开始安装Gulp

1
2
3
npm install -g gulp
leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ gulp -v
[20:37:10] CLI version 3.9.1

得到gulp的版本号,确认安装成功
4、切换到你的在项目根文件夹下,运行

1
npm install gulp --save-dev //将具体的gulp功能插件局部安装项目下

5、安装gulp功能插件依赖包

1
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev

gulp功能模块的文件会放在项目所在的目录的./node_modules
6、我们目前先使用一些简单的功能:

  • 检查Javascript
  • 编译Sass文件
  • 合并Javascript
  • 压缩合并并重命名Javascript
    新建gulpfile.js配置文件放在项目根目录下,整个项目目录结构如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .
    ├── .git 通过git进行版本控制,项目自动生成这个文件
    ├── node_modules 组件包目录
    ├── dist **发布环境**
    │   ├── css 样式文件(style.css style.min.css)
    │   ├── images 图片文件(压缩图片/合并后的图片)
    │   ├── index.html 静态页面文件(压缩html)
    │   └── js js文件(main.js main.min.js)
    ├── gulpfile.js gulp配置文件
    ├── package.json 依赖模块json文件,在项目目录下npm install会安装项目所有的依赖模块,简化项目的安装程序
    └── src **开发环境**
    ├── images 图片文件
    ├── index.html 静态文件
    ├── js js文件
    └── sass sass文件

现在我们开始编写gulpfile.js文件以分配gulp执行任务,gulpfile.js内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 引入gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');//检查js
var sass = require('gulp-sass'); //编译Sass
var concat = require('gulp-concat');//合并
var uglify = require('gulp-uglify');//压缩JS
var rename = require('gulp-rename');//重命名
// 检查js脚本的任务
gulp.task('lint', function() {
gulp.src('./js/*.js') //可配置检查脚本的具体名字
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并,压缩js文件
// 找到js/目录下的所有js文件,合并、重命名、压缩,最后将处理完成的js存放在dist/js/目录下
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
console.log('gulp task is done');//自定义提醒信息
});
.... // 其他任务类似
// 定义默认任务,执行gulp会自动执行的任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听js文件变化,当文件发生变化后会自动执行任务
gulp.watch('./js/*.js', function(){
gulp.run('lint','scripts');
});
});

7、现在,回到命令行窗口,可以直接运行gulp任务

1
2
3
4
5
gulp
这将执行定义的default任务,就和以下的命令式同一个意思
gulp default
当然,我们可以运行在gulpfile.js中定义的任意任务,比如,现在单独运行sass任务:
gulp sass

8、编译会显示Finished,如果你的JS有什么不好的地方它会提醒,避免一些不必要的错误,十分贴心
常见提醒:

1
2
3
4
5
6
7
8
9
禁止在同一行声明多个变量
请使用 ===/!==来比较true/false或者数值
使用对象字面量替代new Array这种形式
不要使用全局函数
Switch语句必须带有default分支
函数不应该有时候有返回值,有时候没有返回值。
For循环必须使用大括号
If语句必须使用大括号
for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染

9、gulp的插件数量很多,可以根据自己的需要进行添加任务
常用的gulp插件参考

1
2
3
4
5
6
7
8
9
10
gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass,安装此版本需要安装ruby
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-livereload: 服务器控制客户端同步刷新(需配合chrome插件LiveReload及tiny-lr)

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

¥ 打赏支持

文章导航

目录

×