首页 > 代码库 > gulp学习笔记1

gulp学习笔记1

2024-08-18 00:17:22   224人阅读

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‘])

 

gulp学习笔记1


联系
我们