gulp

gulp

使用方式

    需要在全局环境和本地环境中都安装

    需要在gulpfile.js

    在gulpfile.js文件中操作gulp，让gulp去创建任务，这个文件的代码运行在node中

        引入gulp，因为gulp是在node-modules中的，所以不需要加路径，只需写名字    const gulp=require（'gulp'）

 

操作方式   

        引入gulp    

             const gulp=require（'gulp'）

            const 安装包名=require（'gulp-安装包名'）

     1、 创建任务

               gulp.task（'任务名称或默认任务default'，[数组]，function（）{

        ·          return gulp.src（'路径'）

                   gulp.pipe（gulp.dest('./dist')）

               }）  

                 第一个参数  任务名称或默认任务  default

         第二个参数  该任务依赖的其它任务   是一个数组 （可选）

         第三个参数  任务回调函数 （任务执行）

                 执行其它任务的方式有两种：

             1）通过default任务依赖执行

             2） gulp  任务名称   

    

     2、 执行任务

                 在命令行中执行    

                 gulp 任务名称

    

     3、 默认任务

                 gulp.task（'default'，[数组]，callback）

                     默认任务直接执行gulp，第二个参数可以是数组，在数组中放入需要执行的其他任务，这些任务会挨个执行，后面的函数可以不写

                 

     4、查找文件

                 gulp.src（'源文件路径'）  

                    ./文件夹名/*.md         文件夹里的所有md  

                    ./文件夹名/*/*.md      所有儿子辈文件夹里的所有md

                    ./文件夹名/**/*.md    所有的后代里面的md

    

     5、文件处理 （如果gulp中没有这个功能，寻找第三方的包来完成，node所有的第三方包基本在npmjs.com网站中）

                 1）管道方法

                            gulp.pipe（）表示输送，即下一步

                 2）目标文件路径

                            gulp.dest()     参数中的文件夹名称可以自动创建

                        

                        gulp-markdown-pdf可以将md文件编译成pdf文件

                        gulp-markdown可以编译成html

                        但更改文件后，需手动进行编译，可以用watch

        

      6、监听文件变化

                gulp.task（'watch：md'，function（）{

                    gulp.watch('要监听的文件路径',['放入文件变化后要执行的任务'])

                }）

                默认任务

                gulp.task（'default',['com','']）

                只在第一次文件更改后做出处理第二次就不进行，所以在每次任务中，都对gulp.src.pipe的东西进行return

 

      7、更改npm start启动模式

            大部分环境是通过npm start运行的，package.json中有一项scripts配置项，可以配置一些快捷操作，只有start可以直接npm start来运行，而其他的都需要npm run 来运行

 

      8、搭建热更新服务器

            利用gulp-connect

 

      9、处理css合并压缩

            

      10、处理JS合并压缩    es6编译成es5

                1）使用commonjs模块化，不需要合并js文件，利用模块化将js功能模块组合在一起，需用工具来进行处理（将模块化开发的src里的js，打包放入dist中），使用gulp-webpack（改名为：webpack-stream）工具处理。webpack-stream就是小型的、专门在gulp里使用的webpack。

            2）es6编译成es5    使用bable工具对js代码进行编译，需下载（bable-loader@7.0.0（@选择版本） bable-core bable-preser-es2015）     

 

    11、处理资源文件引入

        gulp-inject工具自动在html页面中注入css/js依赖

 

 

gulp安装

安装的时候先在全局环境安装           npm install --global gulp

然后在本地（项目目录内）进行安装     npm install --save-dev gulp

 

注意

装包时在项目中会出现node_modules文件夹，装的包都在这个文件夹中，包与包之间是有依赖关系的，安装某个包时，可能会依赖其他包，并连同依赖的包一并下载安装

 

在安装包时是有区别的，有的包如jquery包会打包到项目中一起上线，叫做生产依赖；如gulp包只是在开发时开发环境中使用的包，不会打包到项目中叫做开发依赖。在安装包的时候需要将使用的包记录在package.json文件中

 

安装包时后面跟--save/-s表示是生产依赖

后面跟--save-dev/-D表示开发依赖，并记录在package.json中

 

当迁徙项目时，不会迁移node_modules文件夹，只需要在项目中执行 npm install 就可以将package.json中记录的包全部下载

 

丢包，重新装