gulp学习笔记1

时间:2023-03-08 17:47:14
gulp学习笔记1

gulp系列学习笔记:

1、gulp学习笔记1

2、gulp学习笔记2

3、gulp学习笔记3

4、gulp学习笔记4

1、安装gulp

首先我们需要node环境,nodejs安装这里就不说了,不懂的可以自己百度。
在命令行输入

npm install -g gulp 

安装完成后可在命令行输入 `gulp -v` 以确认安装成功。

2、压缩js

压缩 js 代码可降低 js 文件大小,提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。但如果js文件比较多时候,手动就比较麻烦,gulp这时候就可以派上用场了。

目标:找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下。

gulp 的所有配置代码都写在 gulpfile.js 文件。新建一个 gulpfile.js 文件,在 gulpfile.js 中编写代码

// 获取 gulp
var gulp = require('gulp') // 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify') // 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
});
  • require() 是 node (CommonJS)中获取模块的语法。在 gulp 中你只需要理解 require() 可以获取模块。
  • gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。
  • gulp.src(path) - 选择文件,传入参数是文件路径。
  • gulp.dest(path) - 输出文件,会自动创建一个dist和js文件夹,将压缩后的文件放在里面
  • gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列

运行

打开命令行使用 cd 命令跳转至 gulpfile.js 文件所在目录。在控制台输入 `gulp 任务名` 可运行任务,此处我们输入 `gulp script` 回车。这里我们建立的命令是 script ,因此输入:

gulp script
Error: Cannot find module 'gulp-uglify'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)

Cannot find module 'gulp-uglify' 没有找到 gulp-uglify 模块,那我们就安装,输入命令:

npm install gulp-uglify

安装完成后,输入命令:

gulp script

[15:35:39] Using gulpfile ~/downloads/git/gulp/2/gulpfile.js
[15:35:39] Starting 'script'...
[15:35:39] Finished 'script' after 5.43 ms

3、自动检测代码修改执行任务

一旦js文件有修改 就必须重新在命令行输入 gulp script ,这很麻烦。可以使用 gulp.watch(src, fn) 检测指定目录下文件的修改后执行任务。在 gulpfile.js 中编写如下代码:

// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script']);

但是没有命令可以运行 gulp.watch(),需要将 gulp.watch() 包含在一个任务中。修改代码:

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
})

接着在命令行输入 gulp auto,自动监听 js/*.js 文件的修改后压缩js。至此,我们完成了 gulp 压缩 js 文件的自动化代码编写。可通过 Ctrl + C 停止 gulp。

4、定义默认任务

增加如下代码:

gulp.task('default', ['script', 'auto']);

此时在命令行输入:

gulp

即可运行任务,并且会自动检测。

最终代码如下:

var gulp = require('gulp')
var uglify = require('gulp-uglify') gulp.task('script', function() {
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
}); gulp.task('auto', function () {
gulp.watch('js/*.js', ['script'])
}) gulp.task('default', ['script', 'auto'])

文章参考了以下资料:

1、gulp详细入门教程:  http://www.ydcss.com/archives/18;

2、gulp API 文档:  http://www.gulpjs.com.cn/docs/api/;

3、gulp 入门指南:  https://github.com/huanshen/gulp-book;