首页 > 其他分享> 文章详细

gulp的基本使用

2021-10-02 11:01:05 阅读：219 来源： 互联网

标签：基本 src task pipe gulp 任务使用 css

gulp

一、是什么gulp

前端构建工具。
项目开发完成，部署到线上，为了加快网站访问速度，会将如javascript/html/image/css进行合并压缩。
以前没有构建工具时，都是手动来做。繁琐、浪费时间、不需要动脑。
现在将这些操作编写成一个一个的任务。想做某个操作时，在命令行中操作，执行一个命令。任务就自动执行。如，敲一个命令，css代码自动压缩。

二、能做什么

HTML、CSS、JS文件合并压缩
语法转换（es6->es5，less->css）
公共文件抽离
修改文件浏览器自动刷新。

三、使用步骤

安装gulp
配置文件(根目录下)：
- 初始化packge.json文件：执行npm init 初始化
- gulpfile.js
重构项目文件
- src--源代码文件夹
- dist--构建后的文件夹
在gulpfile.js文件中编写任务
在命令行工具中执行gulp任务

四、安装

依赖于node，安装node。
安装glup

#全局安装
npm install gulp -g
#局部安装
cd 对应目录
npm install gulp@版本号 --save-dev

五、gulpfile.js文件

5.1.gulp中提供的方法

gulp.task()：建立gulp任务
gulp.src：获取任务要处理的文件。。内存中处理。处理好了输出硬盘中
gulp.dest()：输出文件的目的地
gulp.watch()：监控文件的变化
.pipe()：处理，管道流，接通源头文件与目标文件的输出

5.2.插件

gulp-htmlmin：html文件压缩
gulp-csso：压缩css
gulp-babel：js语法转换->es5
gulp-less：less->css
gulp-uglify：压缩混淆js
gulp-file-include：公共文件包含
browsersync：浏览器实时同步
gulp-watch：监控文件变化（自带的gulp.watch()无法监听到新增加的文件，这个模块可以）

插件的使用套路：查官网、npm官网，下载->引入->调用

5.3.编写任务

/*****************gulpfile.js***************/
const gulp=require('gulp'); //引用gulp
const htmlmin = require('gulp-htmlmin');//html文件代码压缩操作
const fileinclude = require('gulp-file-include');//抽取公共部分
const sass = require('gulp-sass')(require('sass'));//sass语法转换
const csso = require('gulp-csso');//gulp压缩css文件
const babel = require('gulp-babel');//es6代码转换
const uglify = require('gulp-uglify');　//引用压缩Js插件
const connect=require('gulp-connect');//引入gulp-connect模块
/*
* 使用gulp.task建立任务
* 参数1：任务的名称
* 参数2：任务的回调函数
* */
gulp.task('first',()=>{
    console.log('第一个任务');
    //1、使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
        //处理的代码，要写在pipe()
        //2、将处理后的文件输出到dist目录中
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())

})
/*
* html任务
* 1.html文件代码压缩操作
* 2.抽取html文件中的公共代码
* */
gulp.task('htmlmin', (done) => {
    gulp.src('./src/*.html')
        //抽取公共部分
        .pipe(fileinclude())
        //压缩html文件中的代码
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload())
    done()
})

/*
* css任务
* 1.sass语法转换
* 2.css代码压缩操作
* */
gulp.task('cssmin', (done) => {
    gulp.src(['./src/css/*.scss','./src/css/*.css'])
        //将sass语法转为css语法
        .pipe(sass())
        //将css代码进行压缩
        // .pipe(csso())
        //将处理的结果进行输出
        .pipe(gulp.dest('./dist/css'))
        .pipe(connect.reload())
    done();
})
/*
* js任务
* 1.es6代码转换
* 2.js代码压缩
* */
gulp.task('jsmin', (done) => {
    gulp.src('./src/js/*.js')
        //将es6转为es5
        .pipe(babel({
            //它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        //将js代码进行压缩
        // .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
        .pipe(connect.reload())
    done();
})

/*
* 复制文件夹
* */
gulp.task('copy', (done) => {
    gulp.src('./src/img/**')
        .pipe(gulp.dest('./dist/img'))
        .pipe(connect.reload())
    done()
})

/*
* 创建服务
* */
gulp.task('serve', ()=>{
    connect.server({
        root:'./dist',　　//使用前面定义的rootPath作为服务器运行的根目录
        livereload:true,　　//是否自动监听，true表明自动监听
        port:3056　　　　//服务器的端口号，可以随便取一个
    });
    // gulp.src('./dist/pc.html')
    //     .pipe(open({url:'http://localhost:3056'}));
});

/*
* watch监听，不需要在cmd中重复执行gulp xxx
* */
gulp.task('watch',()=>{
    //需要使用 done 回调
    gulp.watch('./src/*.html', gulp.parallel('htmlmin'));
    gulp.watch('./src/css/*', gulp.parallel('cssmin'));
    gulp.watch('./src/js/*.js', gulp.parallel('jsmin'));
    gulp.watch('./src/img/*/*', gulp.parallel('copy'));
});

//构建任务,一次执行多个任务。4.0这个写法会报错：
// gulp.task('default',['htmlmin','cssmin','jsmin','copy'],function() {
//     console.log("一次执行多个任务成功")
// })
//4.0写法：parallel 同时执行，series 按顺序---这个需要使用 done 回调,如copy任务
gulp.task("default", gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy','watch','serve', function () {
	console.log("一次执行多个任务成功")
}))

5.4.执行gulp命令

命令行gulp-cli工具，全局安装：

#安装。-g,当前项目需要用，其他项目也需要用
npm install gulp-cli -g
#使用
gulp 任务名

六、其他

* (一个星号)，匹配一级(单层)文件。
** (两个星号)，匹配任意数量的字符(文件)，多个(两层以上嵌套)或零个匹配
series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。
series()：使任务（task）按顺序执行。
parallel()：以最大并发来运行的任务（tasks）。
series()：任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。
parallel()：一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。

学习：
黑马2020最新 Gulp + 模块化开发
 https://www.cnblogs.com/hymenhan/p/14245949.html
https://blog.csdn.net/CDSNshabi/article/details/115164534
https://www.jianshu.com/p/3f62beb3a57b

标签：基本,src,task,pipe,gulp,任务,使用,css
来源： https://www.cnblogs.com/jiajia-hjj/p/15361521.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9