目录
NodeJS中安装第三方模块
Gulp
以及它的使用
Gulp
以及它的使用
-
基于node平台开发的前端构建工具
-
将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了
-
用机器代替手工,提高开发效率。
Gulp能够做什么
-
项目上线,HTML,CSS、JS文件压缩合并
-
语法转换(es6,less...)
-
公共文件抽离
-
修改文件浏览器自动刷新
Gulp的使用
使用npm install gulp
下载gulp库文件
在项目根目录下建立gulpfile.js
文件
重构项目的文件夹结构src
目录放置源代码文件dist
目录放置构建后文件
在gulpfile.js文件中编写任务.
Gulp中提供的方法
- gulp.src(): 获取任务要处理的文件
- gulp.dest(): 输出文件
- gulp.task(): 建立gulp任务
- gulp.watch: 监控文件的变化
// 引用gulp模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('first', () =>{
console.log('人生中的第一个gulp任务执行了!');
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'))
})
要运行gulp任务还需要下载一个gulp给我们提供的命令行工具偶!
npm i gulp-cli -g
在命令行工具中执行gulp任务
gulp 你要执行的任务名称
gulp first
出现报错信息
原因:
这是 gulp4.0 版本使用 task 时,回调函数使用匿名函数带来的问题,gulpgulp 不再支持同步任务
解决方案有很多具体参考 https://www.gulpjs.com.cn/docs/getting-started/async-completion/
比较简单的方法就是 添加 callback,来指示函数完成
即代码修改为:
// 引用gulp模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('first', (cb) =>{
console.log('人生中的第一个gulp任务执行了!');
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'))
cb();
})
😄
Gulp插件
gulp-htmlmin:html文件压缩
gulp-less:less语法转化, gulp-csso:压缩css
先下载模块npm i gulp-less
dest: gulp-less
// 引用gulp模块
const gulp = require('gulp');
const less = require('gulp-less');
// css任务
// 1、less语法转换
// 2、css代码压缩
gulp.task('cssmission', (cb) => {
gulp.src('./src/css/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'))
cb();
})
怎样同时选中css文件和less文件呢?!
// css任务
// 1、less语法转换
// 2、css代码压缩
gulp.task('cssmission', (cb) => {
gulp.src(['./src/css/*.less', './src/css/*.css'])
.pipe(less())
.pipe(gulp.dest('dist/css'))
cb();
})
下载csso的下载模块:
dest: gulp-csso
npm i gulp-csso
// 引用gulp模块
const gulp = require('gulp');
const less = require('gulp-less');
const csso = require('gulp-csso');
// css任务
// 1、less语法转换
// 2、css代码压缩
gulp.task('cssmission', (cb) => {
gulp.src(['./src/css/*.less', './src/css/*.css'])
.pipe(less())
.pipe(csso())
.pipe(gulp.dest('dist/css'))
cb();
})
可以看到,已完成压缩!
gulp-uglify:压缩混淆JavaScript, gulp-babel:JavaScript语法转化
gulp-file-include:公共文件包含
browsersync:浏览器实时同步