Gulp入门

npm
       npm i 包 -S
       npm i 包 -D
       
       package.json
         npm init -y

    sass 
       scss -> css
          npm i sass -g
    
    git 
        git init 
             .git
        git add .
        git commit -m '信息'

        git push

        git clone
        git pull

        项目案例 -> gitee远程库

1.gulp 项目自动化打包构建工具
        => 操作对象: 项目
        => 自动化打包
	
	开发环境 开发工作人员写好的项目代码
	|	gulp工具来执行任务 ex:压缩|sass->scss js最新语法->低版本兼容 ...
    生产环境（服务器）
    用户1，用户2...访问服务器

2.gulp使用
	=>安装gulp环境
           npm i gulp -g 【gulp全局依赖】
           检查是否安装成功？ gulp -version
	=>项目目录
          gulpDemo
             -|src
                -|pages
                    -index.html
                    -login.html
                -|css
                    -index.css
                -|sass
                    -index.scss
                -|js
                    -index.js
                -|static
                    -image
             -|dist
                 -|css
		注意：在项目文件夹gulpDemo 里面执行一个 npm 初始化 
		npm init -y  => package.json文件
 	=> 写任务,在gulpfile.js配置文件
           项目根目录下创建 gulpfile.js 文件
    => 如何写任务, 学习gulp提供写任务api
             下载gulp 使用api
                npm i gulp -D 【项目文件进行gulp安装】=> node_modules
             下载之前:
                初始化项目 npm init -y pageckage.json
    => gulp api  【重点】

gulpfile.js文件中写 gulp 命令
1.引入安装的gulp对象
const gulp = require('gulp') 

2.创建第一个gulp任务 
 *	gulp.task('任务名'，函数)
 *  gulp 任务名 => 终端执行任务

    gulp.task('task1',function(){
        //执行任务代码
        //以下代码 代表的是复制文件
        return gulp.src('./src/sass/**')
                   .pipe(gulp.dest('./dist/sass'))
    })
    gulp.task('task2', function () {
        return gulp.src('./src/js/**')
            .pipe(gulp.dest('./dist/js'))
    })

3.创建一个流，从文件系统读取文件到数据对象（数据流）
    let srcObj = gulp.src('./src/sass/**')
4.创建一个用于将数据对象写入到文件系统的流。
    let desObj = gulp.dest('./dist/')
5.管道链接数据流
    srcObj.pipe(desObj)

6. series 让任务按顺序执行
	gulp.task('taskSeries',gulp.series('task1','task2'))

7. parallel 任务并发执行
	gulp.task('taskPar',gulp.parallel('task1','task2'))
    //可嵌套
	gulp.task('taskparallel', gulp.parallel('task1',gulp.series('task1','task2')))

8. watch 侦听任务
    gulp.task('watch1',function(){
        gulp.watch('./src/css/**', gulp.parallel('task1'))
    })
	动态监听新创建的src>css文件，会同步执行task1任务中的复制文件操作

注意：命名避免关键词 文件路径

[外链图片转存中...(img-TQA4Dc6O-1669771543928)]