精华内容
下载资源
问答
  • 前端自动化构建工具
    万次阅读
    2019-05-15 16:37:07

    前端自动化构建工具有:

    Bower,Gulp,Grunt,node,yeoman。。。

    自动化构建是作为前端工程化中重要的部分,承担着若干需要解决的环节。包括流程管理、版本管理、资源管理、组件化、脚手架工具等。

    流程管理

    完整的开发流程包括本地开发,mock调试,前后端联调,提测,上线等。在每个团队的基础设施当中(如cms系统,静态资源推送系统等),都会存在一定程度将前端开发流程割裂。如何运用自动化的手段,对开发流程进行改善将可以大幅减低时间成本。

    版本管理

    web应用规模愈加复杂,迭代速度也愈加频繁。而前端界面作为一种远程部署,运行时增量下载的特殊GUI软件,如何使用自动化构建工具,对不同版本的资源文件进行管理,并让用户第一时间感知版本的回撤以及升级(尤其是在浏览器缓存以及cdn广泛使用的今天),将对企业有更好的安全保障,对用户有更佳的使用体验。

    资源管理

    随着每个团队业务复杂程度的加深,对于功能模块封装的粒度必将愈加精细。衍生出来的,将会是资源数量以及依赖关系等的管理问题。以人工的方式考虑单个页面或单个功能的资源优化是片面的,并且效率低下。通过工程化的手段,在前端构建过程中自动化地以最优方式处理资源的合并以及依赖,是提升性能以及解放人力资源的重要途径。

    组件化

    组件化方案,是以页面的小部件为单位进行开发,在系统内可复用。如何以最优化方式实现组件化(js、css、html片段,以就近原则进行文件组织,以数据绑定方式进行代码开发,业务逻辑上相对外部独立,暴露约定的接口);并且随着组件化的程度加深,如何对组件库进行管理,合并打包以及多人共同维护等,都是无法避免的问题。

    脚手架工具

    我们希望每次研发新产品不是从零开始,不同团队不同项目之间能有【可复用的模块】沉淀下来。对于前端而言,【可复用的模块】除了【组件】,另外就是【脚手架工具】。运用脚手架工具,一键安装,自动化搭建不同类型项目的完整目录结构,工程师将有更多时间专注在业务逻辑代码的编写上。

    更多相关内容
  • 4款前端自动化构建工具的介绍与对比.zip 大家都知道webpack是当人不让的前端自动化构建工具,但是除了它还有其它常用的前端打包工具存在,现在我们来比较4款
  • Gulp自动化构建工具可以增强你的工作流程! 易于使用、易于学习、构建快速、插件高质! 在日常开发中,可以借助Gulp的一些插件完成很多的前端任务。 如:代码的编译(sass、less)、压缩css,js、图片、合并js,css...
  • 一款小而美的脚手架工具,一般集成在项目中使用,用于自动化创建重复类型文件 一、安装 # 将plop模块作为项目开发依赖安装 yarn add plop --dev 二、使用 在项目根目录下创建 plopfile.js module.exports = plop...

    一款小而美的脚手架工具,一般集成在项目中使用,用于自动化创建重复类型文件

    一、安装

    # 将plop模块作为项目开发依赖安装
    yarn add plop --dev
    

    二、使用

    1. 在项目根目录下创建 plopfile.js
    module.exports = plop => {
        // component ---> 为运行命令
        plop.setGenerator('component', {
            // 描述
            description: 'create a component',
            // 询问,用户交互 (api参照:Inquirer.js)
            prompts: [
                {
                    type: 'input',
                    name: 'name',
                    message: 'component name',
                    default: 'MyComponent'
                }
            ],
            // 执行的动作
            actions: [
                {
                    type: 'add', // 代表添加文件
                    path: 'src/components/{{name}}/{{name}}.vue',
                    templateFile: 'plop-templates/xxx.hbs'
                }
            ]
        })
    }
    
    1. 创建模版
      一般是在项目根目录下创建 plop-templates 文件夹
      内部再创建 hbs模板(Handlebars模板语法) 中文版
    <template>
        <div class="{{ name }}">{{ name }}</div>
    </template>
    
    <script>
    export default {
        name: '{{ name }}',
    }
    </script>
    
    <style lang="less" scoped>
    .{{name}} {
    
    }
    </style>
    
    1. 运行cli命令生成对应模版文件
    yarn plop component
    

    到此结束,自动在src/components/目录下生成了对应模版的文件

    展开全文
  • 前端自动化构建工具grunt使用教程.zip 除了webpack,别忘了还有其它自动化构建工具
  • 前端自动化构建工具gulp使用教程.zip 除了webpack,别忘了还有其它自动化构建工具
  • 前端自动化构建工具--Plop

    千次阅读 2020-06-01 18:00:51
    前端自动化构建工具 ---- Plop 前言:周末在家学习了一些前端自动化构建工具,Generator、Plop、Grunt、Gulp,我还以为目前用不到这些工具,没想到周一一上班看到这周任务是要开发N个新模块,我就感觉我该求助于...

    前端自动化构建工具 ---- Plop

    前言:周末在家学习了一些前端自动化构建工具,Generator、Plop、Grunt、Gulp,我还以为目前用不到这些工具,没想到周一一上班看到这周任务是要开发N个新模块,我就感觉我该求助于某个自动化工具了😂😂

    我要开发的每个模块的结构骨架都非常相似,就可以使用Plop来实现自动化了,Plop旨在根据模板文件自动化创建组件,而不是一个完整的大型应用,这是非常符合我的预期的😄😄😄,接下来我就来介绍一下Plop如果帮助我们在开发过程中提高工作效率。

    一、安装plop

    在项目的根目录下面使用yarn命令安装plop:yarn add plop

    可以在Plop代码仓库看到Plop源代码以及详细说明文档:https://github.com/plopjs/plop

    二、编写plop的入口文件:plopfile.js

    在项目根目录下创建一个文件:plopfile.js。在后面的命令行交互中,我们可以通过prompts获取用户输入的一些信息,如下面的name变量就会由用户输入获得,默认值是MyComponent。我们在指定模板文件生成新文件的时候,可以通过花括号形式的插值表达式传入用户输入的值,如{{name}}.js,那生成的文件名就是用户输入的字符串名字。

    plopfile.js:

    // Plop 入口文件,需要导入一个函数
    // 此函数接受一个plop对象,用户创建生成器任务
    
    module.exports = plop => {
      plop.setGenerator('component', { // component 就是接下来的yarn plop命令后面带来指令名称
        description: 'create a component',
        prompts: [
          {
            type: 'input',
            name: 'name',
            message: 'component name',
            default: 'MyComponent'
          }
        ],
        actions: [
          {
            type: 'add', // 代表添加文件
            path: 'src/components/{{name}}/{{name}}.js', // 要生成的文件路径
            templateFile: 'plop-templates/component.hbs' // 文件模板
          },
          {
            type: 'add', // 代表添加文件
            path: 'src/components/{{name}}/{{name}}.css',
            templateFile: 'plop-templates/component.css.hbs'
          },
        ]
      })
    }
    

    三、创建模板文件

    在项目根目录下创建一个文件夹plop-templates放模板文件,然后创建两个文件,模板中的需要替换的变量用双层花括号的插值表达式传入,如下面的{{name}},其中name来自于命令交互模式用户输入的值。

    • plop-templates/component.css.hbs

      import React from 'react';
      import ReactDOM from 'react-dom';
      import CoursePackage from './{{name}}';
      
      it('renders without crashing', () => {
        const div = documents.createElement('div');
        ReactDOM.render(<{{name}}/>, div);
        ReactDOM.unmountComponentAtNode(div)
      })
      
    • plop-templates/component.hbs

      import React from 'react';
      
      export default () => (
        <div className="{{name}}">
          <h1>{{name}} Component</h1>
        </div>
      )
      

    可能有的同学会有疑问为什么模板文件的扩展名是hbs,是因为plop的模板文件中的插值语法采用的是handlebars语法,所以为了vscode解析语法高亮,所以扩展名最好用hbs,但如果用别的扩展名也没有问题,是没有影响的。

    四、执行plop命令进行自动化任务

    执行自动化命令:yarn plop component
    命令行会等待你输入一个component name,我输入了一个Body
    在这里插入图片描述
    按下回车,此时就会生成对应的文件了:
    在这里插入图片描述
    其中所有的{{name}}都被替换成了我输入的Body

    此时就大功告成了

    五、今日战绩(值得纪念)

    1. 我的plopfile.js文件

    // Plop 入口文件,需要导入一个函数
    // 此函数接受一个plop对象,用户创建生成器任务
    
    module.exports = plop => {
    
      plop.setGenerator('component', {
        description: 'create a component',
        prompts: [
          {
            type: 'input',
            name: 'moduleName',
            message: 'module name',
            default: 'BusinessSkills'
          },
          {
            type: 'input',
            name: 'menuName',
            message: 'menu name',
            default: 'CoursewareLibrary'
          },
          {
            type: 'input',
            name: 'componentName',
            message: 'component name',
            default: 'componentName'
          },
        ],
        actions: [
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/index.jsx',
            templateFile: 'plop-templates/Component/index.jsx'
          },
          {
            type: 'add',
            path: 'public/testdata/{{componentName}}.json',
            templateFile: 'plop-templates/component.json'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/locales/zh-CN.js',
            templateFile: 'plop-templates/Component/locales/zh-CN.js'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/index.jsx',
            templateFile: 'plop-templates/Component/components/PopWindow/index.jsx'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/Detail.jsx',
            templateFile: 'plop-templates/Component/components/PopWindow/Detail.jsx'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/model.js',
            templateFile: 'plop-templates/Component/components/PopWindow/model.js'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/PopWindow/services.js',
            templateFile: 'plop-templates/Component/components/PopWindow/services.js'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/{{componentName}}Grid/index.jsx',
            templateFile: 'plop-templates/Component/components/componentNameGrid/index.jsx'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/{{componentName}}Grid/model.js',
            templateFile: 'plop-templates/Component/components/componentNameGrid/model.js'
          },
          {
            type: 'add',
            path: 'src/pages/ningbo-zhanwu/{{moduleName}}/{{menuName}}/{{componentName}}/components/{{componentName}}Grid/services.js',
            templateFile: 'plop-templates/Component/components/componentNameGrid/services.js'
          },
        ]
      })
    }
    

    2. 模板文件

    在这里插入图片描述

    此处有坑!!!就是我的模板文件要生成jsx文件,所以里面有{{}}的jsx语法,而这个是不能让plop解析的,也就是说模板文件中的有些{{}}要原样输出,这里我花了好长时间查资料都差不到怎么解决😭😭😭,最终是去handlebars的网站上查的语法才查到了解决方法,就是在花括号前面加一个反斜杠进行转义,使{{}}原样输出,如上图中的箭头指向的地方,写成\{{ }}就行了。
    handlebars的语法地址:https://handlebarsjs.com/guide/expressions.html#escaping-handlebars-expressions

    3. 执行plop命令自动化生成组件

    yarn plop component
    在这里插入图片描述

    大功告成✌️✌️✌️ 第一次在实际开发过程中使用这种前端自动化构建工具,体验了一番新的开发方式,效率也大大提高了,开森😆😆😆

    展开全文
  • 前端自动化构建工具 Gulp Gulp 是基于 NodeJS 的前端自动化构建工具,在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务,项目...
  • 前端自动化构建工具

    千次阅读 2018-07-19 11:10:31
    为什么要使用前端构建工具?  自动化!!!!  对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。  当你在 Gruntfile 文件正确配置...

    为什么要使用前端构建工具?

            自动化!!!!

            对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。

            当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

     

    Grunt

    grunt需要package.json文件描述,很多操作都直接通过这个json文件访问

    需要Gruntfile.js文件,这是一个入口文件,grunt将从这里开始,实现你的意图。

     

    关于Gruntfile.js

            Gruntfile.js是Grunt的配置文件,不同于常见的XML格式,它采用的是JavaScript的代码进行配置。整个Gruntfile.js就是一个符合Node.js标准的JavaScript模块。Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作。

    所有的代码要包裹在

            module.exports = function(grunt) {};

     

    Grunt 有关的主要有三块代码:任务配置代码、插件加载代码、任务注册代码

    任务:任务配置代码就是调用插件配置一下要执行的任务和实现的功能

    具体的任务配置代码以对象格式放在 grunt.initConfig 函数里面

                   代码压缩:html压缩:htmlmin css压缩: cssmin js压缩:uglify

                   wiredep任务:自动引入bower管理的第三方组件的js和css

                   usemin和useminPrepare:(同属于grunt-usemin组件的task) js和css等静态文件进行合并压缩处理重命名后对应修改html文件的引用

                   autoprefixer任务:给需要加上厂商前缀的css语句自动加上厂商前缀

                   modernizr:用来检测用户浏览器是否支持某些html5或css3特性的js库

     

    插件:插件加载代码就是把需要用到的插件加载进来

                  grunt.loadNpmTasks('grunt-contrib-uglify');

         合并文件:grunt-contrib-concat

        语法检查:grunt-contrib-jshint

        Scss 编译:grunt-contrib-sass

        压缩文件:grunt-contrib-uglify

        监听文件变动:grunt-contrib-watch

        建立本地服务器:grunt-contrib-connect

     

    任务注册代码就是注册一个 task,里面包含刚在前面编写的任务配置代码。

             grunt.registerTask('task', ['任务配置']);

              task 的命名不能与后面的任务配置同名

     

    Grunt的特点和不足:

            Grunt是一个自动任务运行器,会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程,减轻重复性工作带来的负担。

    1,插件很难遵守单一责任原则(许多插件不得不负责一些和其主要任务无关的事情。比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件)

    2,用插件做一些本来不需要插件来做的事情

    3,试图用配置文件完成所有事,结果很混乱

    4,落后的流程控制产生了让人头痛的临时文件导致性能滞后

     

    Grunt的优点

        1. 简化工作流程,一劳永逸的实现前端的自动化构建、

        2. 符合前端发展趋势,推动其他新技术的应用、

        3. 配置文件灵活,可利用第三方插件,也可以自行扩展、

        4.Grunt 官方提供了一些常见的插件,满足大部分日常工作,而且可靠值得信赖。

     

     

    Gulp

    gulp的特点:

    1,使用gulp.js,你的构建脚本是代码,而不是配置文件

    2,使用标准库(node.js)来编写脚本

    3,插件都很简单,只负责完成一件事,基本都是很短的函数

    4,任务都以最大的并发数执行

    5,输入输出都是基于流式的

     

    gulp的优点:

        gulp是基于Nodejs的自动任务运行器,它能自动化地完成javascript/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

           使用Gulp的优势就是利用流的方式进行文件的处理,使用管道(pipe)思想,前一级的输出,直接变成后一级的输入,通过管道将多个任务和操作连接起来,因此只有一次I/O的过程,流程更清晰,更纯粹。Gulp去除了中间文件,只将最后的输出写入磁盘,整个过程因此变得更快。

        使用Gulp,可以避免浏览器缓存机制,性能优化(文件合并,减少http请求;文件压缩)以及效率提升(自动添加CSS3前缀;代码分析检查)

     

    NPM

            NPM的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。npm的背后,是基于couchdb的一个数据库,详细记录了每个包的信息,包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。

    常见的使用场景有以下几种:

            允许用户从NPM服务器下载别人编写的第三方包到本地使用。

            允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

            允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

     

    bower

    bower和npm的区别

    1、npm(Node Package Manager)是nodejs时代不可或缺的最好的包管理器,现在已经随nodejs官方包同时会安装到你的设备上去。只要给项目书写好package.json放于项目根目录,在重新部署之时只需要执行 npm install一行简单的命令,所有相关的依赖就能够自动安装到项目目录下面,并且还能很方便的对不同项目的不同依赖包版本进行良好、统一的管理。

    2、Bower的安装和升级全都依赖于NPM,使用类似NPM的方式,对于当前项目进行前端依赖的相关管理。

    3、与NPM最大的区别在于,NPM主要运用于Node.js项目的内部依赖包管理,安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发,对于CSS/JS/模板等内容进行依赖管理,依赖的下载目录结构可以自定义。

    4、npm设计之初就采用了的是嵌套的依赖关系树,这种方式显然对前端不友好;而Bower则采用扁平的依赖关系管理方式,使用上更符合前端开发的使用习惯。

     

    bower 的基础功能:

    1.注册模块

          每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配

    2.文件存储

          把文件存储在一个有效的网络地址上,使用的时候可以直接下载到.

    3.上传下载

          你可以把你的包注册后上传存储,使用的时候可以使用一条命令直接下载到当前项目.

    4.依赖分析

          它帮我们解决了包与包直接的依赖关系,我们要知道谁依赖谁,还要明确哪个版本依赖哪个版本,当我们下载一个包A的时候,由于它依赖包B,所以bower会自动帮我们下载好包B

     

    Yeoman

            在web项目的立项阶段,使用yeoman来生成项目文件,代码结构,Yeoman自动将最佳实践案例和工具整合进来,大大加速和方便了我们后续的开发。

     

    Yeoman主要提供了三个工具:脚手架(yo),构建工具(grunt),包管理器(bower)

        YO:Yeoman核心工具,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具

        GRUNT:自动化 ,减少像压缩,编译,单元测试代码校验,这种重复且无业务关联的工作

        BOWER:Web开发的包管理器,概念上类似npm,npm专注于nodeJs模块,而bower专注于CSS、JavaScript、图像等前端相关内容的管理

     

    Generator

            Yeoman提供generator系统,一个generator是一个插件。通过这些官方的Generators,推出了Yeoman工作流,工作流是一个健壮、有自己特色的客户端堆栈,包含能快速构建漂亮的网络应用的工具和框架。Yeoman提供了负责开始项目开发的一切,没有任何让人头痛的手动配置。

     

     

    展开全文
  • git使用方法详解+gulp前端自动化构建工具的使用方法介绍,包含各种命令及使用场景。使用github进行项目存储
  • 一款基于Gulp的前端自动化脚手架,方便本地开发,集html、js压缩、sass、自动添加厂商前缀、精灵图功能于一体
  • 前端自动化构建工具gulp记录
  • 前端自动化构建工具合集之gulp

    千人学习 2017-01-31 23:43:32
    Gulp自动化构建系统,使用node.js串流让构建更的组合,利用外挂(plugins)使应用更灵活,简单的四个命令,组合起gulp强大的构建系统。通过代码优于配置的策略,Gulp 让简单的...用自动化构建工具增强你的工作流程!
  • 前端自动化构建环境可以把这些重复工作一次配置,多次重复执行,极大的提高开发效率。 目前最知名的构建工具: Gulp、Grunt、NPM + Webpack;  grunt是前端工程化的先驱  gulp更自然基于流的方式连接任务  ...
  • PS:前提默认为root权限 一: 修改sources.list apt文件一般在服务器/etc目录下 ubuntu apt-get源文件修改 `/etc/apt/sources.list` 可以先备份源文件内容 `cp /etc/apt/sources.list /etc/apt/sources.list.bak` ...
  • jenkins构建示例 jenkins服务器IP假设为127.0.0.1 Nginx服务器IP假设为127.0.0.2 jenkins服务器与Nginx服务器实现免密登录 # 远程执行命令部署镜像 ssh -o StrictHostKeyChecking=no root@127.0.0.2 "docker pull ...
  • 基于gulp搭建的前端自动化构建,适用于中小型项目,快速构建前端项目框架
  • 工具基础gulp自动化工具构建,可适用于整个前端开发时间线,使用时较简单,在配置完后输入自定义命令即可使用本工具
  • 资源名称:Web前端自动化构建:Gulp、Bower和Yeoman开发指南作者简介:Stefan Baumgartner是一个充满激情的网页开发者和演讲家,他在自己的家乡组织了技术会议。他的研究领域包括网络性能、自动化、体系结构和渐进...
  • gulp+nginx—前端自动化构建工具

    千次阅读 2017-02-28 13:34:30
    codeEasy是一个基于Gulp的前端自动化构建工具,它能够帮助前端开发人员更快的编辑代码,通过gulp的监视功能,能够实时监控文件的变化并进行更新。目前codeEasy支持html压缩,css压缩,sass,CSS自动添加前缀、精灵图...
  • 如果使用不当(比如过度优化),会产生难以预料的问题 但是瑕不掩瑜,它仍是优秀的前端自动化构建工具 #安装 webpack是使用Node.js开发的工具,可通过npm(Node.js的包管理工具)进行安装 我们可以去Node.js官网下载...
  • JDFX是京东前端团队自主研发的一款自动化构建工具,目的是合理、快速和高效的解决前端开发中的工程和项目问题,核心集成了本地调试、本地构建、远程布署、代码生成等一系列开发命令工具。
  • gulp是一个自动化构建工具,开发者可以用它来自动执行一些常见的任务。这里以我之前做的一个demo为例,简要介绍如何使用gulp实现前端工程自动化。 项目结构 其中src目录下表示的是项目的源代码,可以看到其中有...
  • 最全的gulp插件,都在本人的gulp工具中所用,gulp模块的安装方法请点击模块的介绍链接,推荐使用淘宝镜像的npm进行
  • hello yoeman——前端自动化构建工具

    千次阅读 2016-06-29 17:21:22
    最近在听慕客网上关于react.js 的课程,老师用的自动化构建工具就是yeoman。 真的是很强大。 yeoman的描述是THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS 现代化Webapp 的web脚手架!! 对的,它就是自动为...
  • 2:gulphttps://www.gulpjs.com.cn/gulp是一个基于流的自动化构建工具。除了可以管理和执行任务,还支持监听文件、读写文件。基于内存实现的,其构建速度比 Grunt 快,而且,Gulp 的生态也很完善,插件质量很高。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,583
精华内容 35,033
热门标签
关键字:

前端自动化构建工具

友情链接: suijishengchengkeli.zip