一、概述&安装

Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率。

比如:

  1、  压缩js

  2、  压缩css

  3、  压缩less

  4、  压缩图片

  等等…

我们完全可以利用Gulp来自动化地完成这些重复性很强的工作。

好了,废话不多说了。既然要了解Gulp,就得先安装它。

Gulp是基于node来实现的,so你得先有个node环境(见“初探nodeJS”)

node环境有了后,安装Gulp就很easy咯。

命令行中,输入npm install gulp –g就OK啦。(-g代表全局)。

如下:

细说gulp

安装完成后,输入gulp –v查看是否安装成功。

如下:

细说gulp 

但,就算你这么安装了全局gulp,你每次到项目中时,还得在相应目录下安装gulp。

原因就是,gulp就这么设置的,避免发生版本冲突

所以这步安装gulp可以可无,不过就当初步了解它嘛。

二、小试牛刀之压缩Javascript

因为gulp是自动化工具,所以我们得告诉它,需要怎么做,才能达到我们的目的。

我们首先得新建一个js文件,用来编写我们的需求,以便gulp能按着我们的意愿来执行。

如,我将这个js文件取名叫gulpfile( 且必须取为gulpfile名,否则在node环境下运行是,会报错:No gulpfile found),并放置在D盘中的gulp文件夹里。

细说gulp

随后,打开新建的gulpfile.js,开始我们的压缩JavaScript之路吧。

gulp作为node的一个模块,所以,第一步我们得在gulpfile.js里引入gulp这个模块。

如下:

细说gulp

接着,因为我们此次的目的是压缩JavaScript,所以还得引入一个压缩Javascript的模块(gulp-uglify)

如下:

细说gulp

最后,就是具体编写我们的需求了。

如我的需求是,将script文件夹中的JavaScript文件压缩到newScript文件夹中。

具体代码如下:

细说gulp

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块,用于压缩JS
var uglify = require('gulp-uglify');
//'firstScript'为我们自定义的任务名,匿名函数为'firstScript'具体任务
gulp.task('firstScript', function(){
    // 'script/*.js'是即将压缩的js文件
    gulp.src('script/*.js')
        //uglify()是调用的压缩方法,去压缩js
        .pipe(uglify())
        //gulp.dest是将压缩后的文件另存为哪的方法,如存到newScript文件夹中
        .pipe(gulp.dest('newScript'));        
});
EntireCode

相关文章:

  • 2022-01-09
猜你喜欢
  • 2021-10-23
  • 2022-01-17
  • 2021-11-17
  • 2021-07-22
  • 2021-06-01
  • 2022-01-08
  • 2021-04-01
相关资源
相似解决方案