一、 Gulp 是什么?
Gulp 是一个基于 Node.js 的自动化构建工具。 我们可以使用它在项目开发过程中自动执行常见的任务。
二、入门准备:安装 Gulp
-
全局安装 Gulp:
bashnpm install --global gulp-cli
-
在项目中安装 Gulp:
bashnpm install --save-dev gulp
三、Gulpfile
Gulp 的所有配置和任务都写在一个名为 gulpfile.js
的文件中,你需要手动在项目根目录下创建它。
Gulp 的 API 非常精简,掌握下面四个核心方法,你就基本入门了:
gulp.src()
: 指向需要处理的源文件。gulp.dest()
: 指定处理后文件的输出路径。gulp.task()
: 定义一个 Gulp 任务。gulp.watch()
: 监听文件的变化,自动执行相应的任务。
四、你的第一个 Gulp 任务
让我们来创建一个实际的任务:压缩 JavaScript 文件。
-
安装插件: 我们需要一个用于压缩 JS 的插件,这里选用
gulp-uglify
。bashnpm install --save-dev gulp-uglify
-
编写
gulpfile.js
:javascript// 首先引入 gulp 和需要使用的插件 const gulp = require('gulp'); const uglify = require('gulp-uglify'); // 定义一个名为 'scripts' 的任务 gulp.task('scripts', function() { // 1. 找到源文件 return gulp.src('src/js/*.js') // 2. 通过 pipe() 方法进行处理 .pipe(uglify()) // 3. 输出到指定目录 .pipe(gulp.dest('dist/js')); });
这段代码定义了一个名为
scripts
的任务。它会找到src/js/
目录下的所有.js
文件,使用uglify
插件进行压缩,然后将压缩后的文件输出到dist/js/
目录下。 -
运行任务: 在终端中执行:
bashgulp scripts
执行完毕后,你就可以在
dist/js
目录下看到被压缩后的 JS 文件了。
总结
如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript开发干货