zoukankan      html  css  js  c++  java
  • 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中记录的包全部下载
     
    丢包,重新装
  • 相关阅读:
    习题8-8 判断回文字符串
    Field笔记
    Object类中的方法
    字符和字节的区别
    Layui搜索设置每次从第一页开始
    Springboot+Jpa+Layui使用Pageable工具进行数据分页
    Map<String, Object>返回类型
    List集合中剔除重复的数据
    Springboot+Mybatis(Mysql 、Oracle) 注解和使用Xml两种方式批量添加数据
    MySql中group_concat函数的使用
  • 原文地址:https://www.cnblogs.com/tis100204/p/10297394.html
Copyright © 2011-2022 走看看