Gulp入门笔记

很多时候,在一个网站上线之前,都需要对网站中的很多资源进行压缩和简化.如果手动来完成这个过程,任务辣魔多,悲伤辣魔大.所以这个时候就需要利用 Gulp 来进行自动化压缩什么的.额,这是我当前对 Gulp 的理解.

世界上之所以会出现那么多工具,都是因为一个字 ---- "懒".(所以我要来偷懒了)

下载与安装

一.Node.js安装

Gulp是一个依赖于 Node.js 的工具.所以想要使用 Gulp 就必须先下载和安装 Node.js

Node.js 在我看来就是一个可以用来搭建服务器的软件.

当你安装完 node.js 之后,就安装好了 npm. npm 是 node.js 的一个包管理工具,就是用来下载很多很多依赖于 node.js 软件的软件.那么 Gulp 我们就是要用这个 npm 来下载啦.

这篇文章里面我假设我的项目路径是在 E:/gulptest/

二.初始化项目

在命令行模式进入到你的项目路径,如上所说的 E:/gulptest/,然后输入:

npm init

下面他会要求你填写一些项目信息,那个可以稍后再去填,所以一路回车就行了.他会在目录下生成一个 package.json 文件

为什么要有这么一个文件?因为你以后会用到很多很多的gulp插件,这个文件会记录你用了哪些插件的哪些版本,如果以后有人要对你的项目进行二次开发,就可以一目了然地看到你使用了哪些插件

三.安装 Gulp 到项目中

输入以下命令把gulp安装到当前项目中,并告诉那个package.json你使用了gulp.

npm install gulp --save-dev

--save-dev - 有了这个参数将会在程序安装后将把这个插件记录到 package.json 中~以后别人需要拷贝你的项目的时候就没必要连同插件一起拷贝啦,而且拷贝之后只需要在项目目录下输入npm install就自动自动安装所有记录在 package.json 中的插件了~

项目名不能是 gulp,要不然这一步会失败.

四.建立 gulpfile.js 文件

在项目中建立一个 gulpfile.js,之后就用这个文件来写一些自动化构建的脚本.

当前我的项目的目录结构:

gulptest/
   ├ dist/
   ├ src/
      └ js/
         └ hello.js
   ├ gulpfile.js
   └ package.json

写脚本噜

我们都说要用自动化的方式来压缩一些文件咯~所以我们从怎么去压缩一个js文件来学习怎么用gulp(其实就是怎么写脚本).

一.准备插件

为了压缩js,我们需要一个插件: gulp-uglify,安装就是用命令行模式进入到项目目录然后输入
npm install gulp-uglify --save-dev

二.编写代码

然后在 gulpfile.js 中编写如下代码

//获取刚刚安装的gulp
var gulp = require('gulp');

//获取刚刚安装的gulp-uglify模块
var uglify = require('gulp-uglify');

//压缩 js 文件
//在命令行使用 gulp uglifyscript 启动此任务
gulp.task('uglifyscript', function() {
    // 1. 找到文件
    gulp.src('src/js/*.js')
    // 2. 压缩文件
        .pipe(uglify())
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'));
});
  • gulp.task(name, fn) - 给一个任务起名字,第一个参数是任务名,第二个参数一个函数,定义这个函数要做什么.

  • gulp.src(path) - 选择文件,参数是文件路径.

  • gulp.dest(path) - 输出文件,参数是文件路径.

  • gulp.pipe() - 就是把几个任务排队,然后顺序运行.

三.执行代码

写完之后就可以在命令行输入 gulp uglifyscript 来运行这个任务啦~上面这个任务就会将项目中 js文件夹 路径下的所有 js文件压缩然后输出到 dist的js文件夹下.

当前我的项目的目录结构:

gulptest/
   ├ dist/
      └ js/
         └ hello.js
   ├ src/
      └ js/
         └ hello.js
   ├ gulpfile.js
   └ package.json

四.自动检测变更

但是咧,项目开发过程中是需要频繁修改一些文件的,如果每一次修改过后都要到命令行去执行一次gulp那就太麻烦啦,所以这个时候就要用到gulp提供的 gulp.watch(src, fn).

在上面的那段代码中加入以下代码:

gulp.task('auto', function () {
    //检查指定目录中的指定文件,如果有发生变动,就执行 "uglifyscript" 命令
    gulp.watch('src/js/*.js', ['uglifyscript'])
})

这个时候,在命令行中输入 gulp auto 来运行上面这段脚本,然后不要把命令行窗口关掉,就一直挂在那儿,一旦他检测到指定文件有改动,就会自动运行指定任务啦~如下图所示就是在运行脚本之后修改了某个文件,它就会自动运行啦.

五.默认任务

gulp还默认了一个任务,就是当你在命令行只输入 gulp 的时候,他会执行一个叫做 default 的任务.

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

如果想让这个默认任务执行其他我们自己写的任务,就像上面所写的 uglifyscript,可以写成这样:

//多个任务之间可以用逗号隔开
gulp.task('default',['uglifyscript','auto']);

到这里基本上就可以简单地使用上Gulp啦~


一些常用的gulp插件

  • gulp-uglify - 压缩js文件(官网)

  • gulp-clean-css - 压缩css文件(官网)

  • gulp-less - 编译less文件(官网)

  • gulp-imagemin - 压缩图片(官网)

  • gulp-watch-path - 检测特定文件以执行命令(官网)

  • gulp-autoprefixer - 为css自动添加一些前缀(官网)

  • 呐,再补充啦

  前端 gulp