gulp的安装及使用（超详细）
杜茂
目录
1. gulp的简介
使用Gulp进行任务自动化可以让前端开 发人员更加高效地构建和管理自己的项 目，并可以大大减少重复的手动操作。 下面是关于如何使用Gulp的简要步骤：
2. gulp的安装
1.安装gulp
在开始之前， 需要确保您已经安装了 Node.js和npm。在命令行中使用如下命 令来安装Gulp：
npm install -g gulp-cli这会将Gulp命令行工具安装在全局环境下。
2.创建工程
创建一个空白的项目，并在项目的根目录下用如下命令生成一个名为package.json的文件。 在package.json文件中添加必要的依赖，以及“gulp”作为开发依赖。
npm init
npm install gulp --save-dev3.引入gulp
在项目内创建Gulp文件(gulfile.js)，并在其中引入 gulp依赖。如下所示：
const gulp = require('gulp');3. gulp的基本使用
1.创建gulp任务
const gulp = require("gulp")
gulp.task("greet",function () {
console.log('hello world');
});2.运行gulp任务
1.通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的，不能引用全局下的。require语法是node.js独有的，只能在node.js环境下使用。
2.gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字，第二个参数是一个函数，就是执行这个命令的时候会做什么事情，都是写在这个里面的。
3.写完以上代码后，以后如果想要执行greet命令，那么只需要进入到项目所在的路径，然后终端使用gulp greet即可执行。
gulp greet4. gulp的插件使用
1.创建处理html文件的任务
处理html文件，我们需要使用到
ggulp-htmlmin插件。安装命令如下：
npm install gulp-htmlmin -D然后在
gulpfile.js中写入以下代码：
const gulp = require("gulp")
const htmlmin = require('gulp-html')
gulp.task("html",function () {
gulp.src('./src/pages/*.html')
.pipe(htmlmin({ // 通过配置的参数进行压缩
collapseWhitespace:true, //移出空格
removeEmptyAttributes:true, //表示移出空的属性（仅限于原生属性）
collapseBooleanAttributes:true, // 移出布尔值属性
removeAttributeQuotes:true, // 移出属性上的双引号
minifyCSS:true, //压缩内嵌式css代码（只能基本压缩，不能添加前缀）
minifyJS:true, // 压缩内嵌式js代码（只能基本压缩，不能进行转码）
removeStyleLinkTypeAttributes:true,//移出style和link标签上的type属性
removeScriptTypeAttributes:true, // 移出script标签上默认的type属性
}))
.pipe(gulp.dest('./dist/pages/'))
});2.创建处理css文件的任务
如果我们想要实现一些更加复杂的功能，比如
css压缩，那么我们还需要安装一下gulp-cssnano插件
npm install gulp-cssnano --save-dev然后在
gulpfile.js中写入以下代码：
const gulp = require("gulp")
const cssnano = require("gulp-cssnano")
// 定义一个处理css文件改动的任务
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./dist/css/"))
});以上对代码进行详细解释：
- gulp.task：创建一个css处理的任务。
- gulp.src：找到当前css目录下所有以.css结尾的css文件。
- pipe：管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano。
- gulp.dest：将处理完后的文件，放到指定的目录下。不要放在和原文件相同的目录，以免产生冲突，也不方便管理。
3.创建处理js文件的任务
处理
js文件，我们需要使用到gulp-uglify插件。安装命令如下：
npm install gulp-uglify --save-dev安装完后，我们就可以对
js文件进行处理了。示例代码如下：
const gulp = require("gulp")
const uglify = require('gulp-uglify');
gulp.task('script',function(){
gulp.src(path.js + '*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});这里就是增加了一个.pipe(uglify())的处理，对js文件进行压缩和丑化（修改变量名）等处理。
类似资料：