前端自动构建工具@gulp入门

时间:2023-01-04 19:38:22

gulp是一个自动化的前端工具。它可以利用自身的插件来实现一些功能,如sass、less编译;浏览器自动刷新,文件压缩、重命名、代码校验(个人使用sublime的插件进行校验)等功能。当然这些功能也可以通过其他手段来实现,但是gulp实现的功能比较全面、快速、而且具有选择性(每个人都可以利用它来实现自己需要的功能)。

1.gulp安装

  1)首先安装node环境

  2)node全局安装gulp(npm install -g gulp),如果安装不上可使用淘宝镜像(cnpm install -g gulp)

2.gulp插件的使用

  安装好gulp之后现在就需要使用gulp实现一些功能。

  例如:实现js压缩并重命名

  1)命令行切换到工程目录下,在工程目录下安装gulp(cnpm install gulp --save-dev)

  2)在工程目录下安装gulp-uglify(压缩js的插件)和gulp-rename(文件重命名插件)。

  3)然后在项目的根目录下新建文件gulpfile.js。

  4)在gulpfile.js中的代码如下:

 1 //引入gulp 、gulp-rename、gulp-uglify
2 var gulp = require('gulp'),
3 rename = require('gulp-rename'),
4 uglify = require('gulp-uglify');
5 //定义任务名称‘uglify’
6 gulp.task('uglify',function(){
7 //选择文件路径
8 gulp.src('script/angular/angular-1.4.6.js')
9 //使用uglify压缩
10 .pipe(uglify())
11 //对文件进行重命名
12 .pipe(rename('angular-1.4.6.min.js'))
13 //文件的输出路径
14 .pipe(gulp.dest('script/angular'))
15 });

  5)在命令行中执行guip uglify

 

3.gulp常用的api

  1)gulp.task() 定义一个gulp任务

  2)gulp.src() 定义文件的路径

  3)gulp.dest() 定义文件的输出路径

  4)gulp.watch()对文件进行监听

4)个人常用的gulp插件(后面依次介绍)

  1)sass编译(也可以实现less编译,只是使用的插件不同)

  2)自动添加浏览器前缀(如-webkit、 -ms、-moz、-o 等),貌似根据caniuse的数据来进行浏览器前缀的添加。

  3)html、css、js文件的压缩、合并重名等

  4)浏览器的自动刷新

等等。。