gulp 自动化管理工具实现全过程

1.全局安装gulp

　　

npm install gulp -g

 

2.项目内安装gulp

　　

npm install gulp -s

 

3.项目根目录新建gulpfile.js

　　js内代码：

　　

　　

//载入gulp核心包
const gulp = require('gulp');
//引入http服务器
const connect = require('gulp-connect');
//引入less文件
const less = require('gulp-less');
// (任务名，任务执行函数)
gulp.task('hello', async() =>{
console.log('hello itTest');
//这里编写重复性的流程
});

//拷贝文件
// gulp.task('dest', async() =>{
// //获取文件
// gulp.src('src/**/*.*')
// //pipe让文件流走向下一个环节 
// .pipe(gulp.dest('dist/'));//括号内为拷贝至目标目录 ... *表示任意的通配符，*/表示任意目录文件下的任意文件夹 **/表示递归获取该目录下所有的文件夹（针对文件夹套文件夹的情况） 
// });
//less转换
gulp.task('style',async() =>{
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css/'))
.pipe(connect.reload());
});
//html文件
gulp.task('html',async() =>{
gulp.src('src/**/*.html')
.pipe(connect.reload());
});
//js文件
gulp.task('js',async()=>{
gulp.src('src/**/*.js')
.pipe(connect.reload());
});
//监视less文件
gulp.task('watch',async() =>{
gulp.watch('src/less/*.less', gulp.series('style'));
gulp.watch('src/**/*.html', gulp.series('html'));
gulp.watch('src/**/*.js', gulp.series('js'));
});
//创建服务器
gulp.task('server',async() =>{
//创建服务器默认监听8080端口
connect.server({
root: 'src',
livereload: true,
port:'9002'
});
});
//默认任务
gulp.task('default', gulp.series('server', 'watch'));
// gulp.task('load',async() =>{
// gulp.src('src/*')
// .pipe(connect.reload())
// })
//通过命令行输入gulp+任务名运行任务,默认任务可直接通过命令行直接输入gulp回车执行。
//gulp原生不支持任何功能，只提供最基础api

 

4.终端输入gulp+指令，命令执行。

转载于:https://www.cnblogs.com/shoucigongkai/p/11301114.html