第三方模块Gulp

最新推荐文章于 2023-03-21 15:30:23 发布

原创最新推荐文章于 2023-03-21 15:30:23 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gulp

1.Gulp介绍

gulp是基于node平台开发的前端构建工具，将机械化操作编写成任务，用机器代替手工提高开发效率。当项目开发完成，部署到线上运行的时候，将HTML、CSS、JS文件压缩合并。还可以语法转换，例如ES6、LESS、SASS。Gulp的作用还有：将公共文件抽离、修改文件浏览器自动刷新。

2.Gulp的使用

(1) 下载：npm install gulp

(2)在项目根目录下建立gulpfile.js文件

(3)重构项目的文件夹结构src目录放置源代码文件，dist目录放置构建后文件

(4)在gulpfile.js文件中编写任务

(5)在命令行工具中执行gulp任务

3.gulp中提供的方法

gulp.src() 获取任务要处理的文件

gulp.dest() 输出文件

gulp.task() 建立gulp任务

gulp.watch() 监控文件的变化

4.gulp命令行工具

gulp中提供了命令行工具可以执行命令(安装)：npm install gulp-cli -g (-g是全局安装，当前项目可用，其他项目也可用)

clear:清屏

命令语句: gulp+空格+要执行的命令

e.g: gulp first

复制文件e.g：

//通过gulp.task建立任务
//参数一：任务的名称  参数二：任务的回调函数
gulp.task('first',()=>{
    console.log('第一个gulp任务执行了！')
    //使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    //要处理的代码必须写在pipe中
        .pipe(gulp.dest('dist/css'))
})