Node.js Gulp的基本使用和常用插件

插件"/>

Node.js Gulp的基本使用和常用插件

使用Gulp五步骤

1.使用 npm install gulp下载gulp库文件
2.在项目根目录下建立 gulpfile.js文件
3.重构项目的文件夹结构src目录放置源代码文件 dist目录放置构建后文件
4.在 gulpfile.js文件中编写任务
5.在命令行工具中执行gulp任务

– 下载gulp插件
– 引入gulp、插件
– 创建gulp任务
– 执行gulp任务
示例：

const gulp = require('gulp');	// 引用gulp库
const htmlmin = require('gulp-htmlmin');	// 引用gulp-htmlmin模块
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', done => {console.log('人生中的第一个gulp任务执行了');// 1.使用gulp.src获取要处理的文件gulp.src('./src/css/base.css').pipe(gulp.dest('dist/css'));done();
});
// 在安装好gulp、gulp插件之后在根目录下终端执行gulp first（任务名称

Gulp中提供的方法

1.gule.src(): 获取任务要处理的文件
2.gule.dest(): 输出文件
3.gule.task(): 建立gulp任务
4.gule.watch(): 监控文件的变化

Gulp常用插件

1.gulp-htmlmin:html文件压缩
2.gulp-csso:压缩css
3.gulp-babel: JavaScript语法转化
4.gulp-less: less语法转化
5.gulp-uglify:压缩混淆 JavaScript
6.gulp-file-include公共文件包含
7.browsersync浏览器实时同步

常用命令

npm xx --save-dev 开发依赖
npm init -y 下载package.json文件
npm install 下载项目依赖的包
npm install --production 下载dependencies里面的包
npm run xx 执行添加的scripts别名