打包工具_打包工具jekenis - CSDN
精华内容
参与话题
  • 前端面试——打包工具

    千次阅读 2019-03-25 19:42:52
    1.什么是打包工具,为什么用打包工具? 它是一种将前端代码进行转换,压缩以及合并等操作的程序工具。目前常见的有grunt,webpack等。 web前端打包工具,它能将我们前端人员写得less,sass等编译成css.将多个js...

    https://www.cnblogs.com/goloving/p/8511861.html

    1.什么是打包工具,为什么用打包工具?

           它是一种将前端代码进行转换,压缩以及合并等操作的程序工具。目前常见的有grunt,webpack等。

          web前端打包工具,它能将我们前端人员写得less,sass等编译成css.将多个js文件合并压缩成一个js文件。它的作用就是通过将代码编译、压缩,合并等操作,来减少代码体积,减少网络请求,以及方便在服务器上运行。目前,会使用web前端打包工具是现代前端人员必备技能。打包工具在前端单页面中使用的比较多。

     

    2.简单介绍一下webpack?

          webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到。

     

    3.webpack和grunt/gulp的区别?

      其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

    • Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。
    • Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
    • 如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。

     

    展开全文
  • Windows软件打包工具的使用

    千次阅读 2020-06-24 12:00:56
    注:打包遇到过里面的exe文件不见了,这个是因为整个打包文件夹里面有的文件名称有问题,修改名称改变文件的顺序后再打包就解决了 工具软件下载地址:https://download.csdn.net/download/bigtree_mfc/1...

    注:如果打包的软件要发往国外记得先使用这个网站进行杀毒扫描打包后的软件:http://www.virscan.org/language/zh-cn/

    注:打包遇到过里面的exe文件不见了,这个是因为整个打包文件夹里面有的文件名称有问题,修改名称改变文件的顺序后再打包就解决了

     

    工具软件下载地址:https://download.csdn.net/download/bigtree_mfc/10503495

    密码是2048

    第一步安装

    第二步安装汉化

    第三步:

    然后在里面输入用户名和注册码,具体信息在注册码的txt文本中。

    下一步:设置

    常规中设置软件名称/版本/公司名称等信息。

    文件中添加需要打包的文件

    界面中设置logo/语言/图标

    快捷方式设置:点击添加设置,快捷方式名称/启动的exe文件/图标

    都完成后点击工具栏上面的按钮,然后会弹出编译对话框

    都完成后,会安装你打包的软件,安装完成后,打包软件会提示你是否保存现在这个打包数据的配置。

     

    注:修改默认安装路径

    2020-06-24添加:

    目标路径建议写成:%ProgramFiles%\%CompanyName%\%ProductName%

    有时候打包的时候需要连驱动一起打包,这个打包软件提供了命令的功能可以来安装驱动

     

    命令中直接添加路径,注意设置为在解压缩之后,这样安装exe后会安装驱动

    展开全文
  • 前端打包工具

    千次阅读 2018-08-08 17:27:12
    前端打包工具是一种将前端代码进行转换,压缩以及合并等操作的程序工具。目前常见的有grunt,webpack等。 它能将我们前端人员写得less,sass等编译成css.将多个js文件合并压缩成一个js文件。它的作用就是通过将代码...

    前端打包工具是一种将前端代码进行转换,压缩以及合并等操作的程序工具。目前常见的有grunt,webpack等。

    它能将我们前端人员写得less,sass等编译成css.将多个js文件合并压缩成一个js文件。它的作用就是通过将代码编译、压缩,合并等操作,来减少代码体积,减少网络请求。以及方便在服务器上运行。目前,会使用web前端打包工具是现代前端人员必备技能。

    webpack

    webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。它将一堆文件中的每个文件都作为一个模块,找出它们的依赖关系,将它们打包为可部署的静态资源。

    我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情。

    一个基本的例子,想像我们有一些 CommonJS 模块,它们不能直接在浏览器中运行,所以我们需要打包成一个文件,这样就可以通过 <script> 标签加载。webpack 可以遵循 require() 调用的依赖关系,为我们完成这些工作。

    但是 webpack 可以做的不止这些。通过“loader”,我们可以配置 webpack 以任何方式去转换所有类型的文件。包括以下例子:

    • 转换 ES2015,CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
    • 可以选择在编译之前检验你的源代码;
    • 将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中;
    • 将 Sass 文件转换为纯 CSS,然后将其转换成 JavaScript 片段,将生成的 CSS 作为 <style> 标签插入页面;
    • 处理 HTML 或者 CSS 中引用的图片,移动到配置的路径中,并且使用 md5 hash 重命名。

    当你理解 webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦。

    webpack模块引入

    一. HTML

    直接在页面引入 webpack 最终生成的页面脚本即可,不用再写什么 data-main 或 seajs.use 了:

    <!DOCTYPE html>
    
    <html>
    
    <head
    lang="en">
    
      <meta
    charset="UTF-8">
    
      <title>demo</title>
    
    </head>
    
    <body>
    
      <script
    src="dist/js/page/common.js"></script>
    
      <script
    src="dist/js/page/index.js"></script>
    
    </body>
    
    </html>
    

    可以看到我们连样式都不用引入,毕竟脚本执行时会动态生成<style>并标签打到head里。

    二. JS

    各脚本模块可以直接使用 commonJS 来书写,并可以直接引入未经编译的模块,比如 JSX、sass、coffee等(只要你在 webpack.config.js 里配置好了对应的加载器)。

    我们再看看编译前的页面入口文件(index.js):

    require('../../css/reset.scss'); //加载初始化样式
    
    require('../../css/allComponent.scss'); //加载组件样式
    
    var
    React = require('react');
    
    var
    AppWrap = require('../component/AppWrap'); //加载组件
    
    var
    createRedux = require('redux').createRedux;
    
    var
    Provider = require('redux/react').Provider;
    
    var
    stores = require('AppStore');
    
    var
    redux = createRedux(stores);
    
    var
    App = React.createClass({
    
        render: function() {
    
            return
    (
    
                <Provider redux={redux}>
    
                    {function() { return
    <AppWrap />; }}
    
                </Provider>
    
            );
    
        }
    
    });
    
    React.render(
    
        <App />, document.body
    
    );
    

    一切就是这么简单么么哒~ 后续各种有的没的,webpack 都会帮你进行处理。

    展开全文
  • 打包工具

    2019-03-12 10:06:26
    gulp 浅谈gulp 第一步、安装gulp: 全局的:npm i gulp -g 启动器 本地的:npm i gulp 核心库 ...第二步、编写配置: ...在gulp中,存在已在处理流操作pipe,还有task函数 task可以用多个,处理一个格式的文件时,...

    gulp

    浅谈gulp

    • 第一步、安装gulp:

      全局的:npm i gulp -g 启动器
      本地的:npm i gulp 核心库

    • 第二步、编写配置:
      gulpfile.js

    在gulp中,存在已在处理流操作pipe,还有task函数

    task可以用多个,处理一个格式的文件时,比如处理js文件

    gulp.task('js', ()=>{ return xxx})
    

    task的函数,全部处理都在return当中,xxx可以做需要的gulp操作

    下面是gulpfile.js文件(运行gulp的必须物)

    const gulp = require('gulp')
    const uglify = require('gulp-uglify')
    
    gulp.task('js', ()=>{
        return gulp.src(['./src/js/*.js'])
        //流操作
        .pipe(uglify())
        .pipe(gulp.dest('./build/js'))
    })
    
    gulp.task('default', ['js'])
    

    一个简单的小测试,这里使用了两个包,一个gulp本体,一个gulp-uglify是用于压缩用的

    1. gulpfile文件里面必须要有一个default属性的task函数,不然就得自己一个一个的运行task,
    2. default为总输出,就是你里面写了多少个task它都输出
    3. return gulp.src([''])这里,gulp.src([])里面放一个数组的原因是因为有可能有多个格式的文件,所以这里我使用了数组, pipe(uglify())就是用uglify包进行压缩,pipe是流,用node压缩过的都知道
    4. pipe(gulp.dest())这里是输出目录,dest里面写的是需要输出的路径

    一些gulp包的使用

    const gulp = require('gulp')
    const uglify = require('gulp-uglify')
    const concat = require('gulp-concat')
    const rename = require('gulp-rename')
    const cssmin = require('gulp-cssmin')
    const imagemin = require('gulp-imagemin')
    
    • concat合并包
    • rename重命名包
    • cssmin css压缩包
    • imagemin 图片压缩包

    concat使用

    gulp.task('js', ()=>{
        return gulp.src(['./src/jg/**/*.js'])
        .pipe(concat('bundle.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./bulid/js'))
    })
    

    在uglify压缩前,放一个concat(name),就可以把需要压缩的东西合并成一个新的文件

    rename使用

    gulp.task('js', ()=>{
        return gulp.src(['./src/jg/**/*.js'])
        // .pipe(concat('bundle.min.js'))
        .pipe(uglify())
        .pipe(rename({'suffix' : '.min'}))
        .pipe(gulp.dest('./bulid/js'))
    })
    

    在输出前,使用rename({'suffix:name'})这样就可以修改你需要输出的文件的名字

    cssmin 的使用

    gulp.task('css', ()=>{
        return gulp.src(['./src/css/**/*.css'])
        .pipe(concat('style.min.css'))
        .pipe(cssmin())
        .pipe(gulp.dest('./bulid/css'))
    })
    

    选择需要压缩的css文件,在输出前进行cssmin()即可压缩css文件

    imagemin的使用

    gulp.task('image', ()=>{
        return gulp.src(['./src/image/**/*.jpg','./src/image/**/*.png','./src/image/**/*.gif'])
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),//渐进加载
            imagemin.jpegtran({propressive: true}),
            imagemin.optipng({optimizationLevel: 5})//优化级别
        ])
        )
    })
    

    image的参数比较多,需要配置三个参数,分别处理jpf,gif,png的

    因为之后要用的是webpack,所以gulp就稍微研究一下就好了


    webpack

    webpakc.config.js配置文件

    module.ewports={
        mode:'',
        entry:''||{},
        output:{
            path,
            filename
        },
        module:{
            rules:[]
        }
    }
    

    mode:模式,有production生产模式,development开发模式

    entry:入口,string为单入口,json是多入口

    output:path生成的文件地址,filename文件名字[name]为占位符

    module:模块,添加loader,loader是从后面开始读起

    loader(核心)

    处理css

    • css-loader
    • style-loader
    rules:[{test:/\.css$/, use:['style-loader','css-loader']}]
    

    就可以处理打包css的文件了

    浏览器兼容

    • postcss-loader
    • autoprefixer

    可处理浏览器的兼容性,帮你生成兼容前缀

    postcss-loader需要一个配置文件,postcss.config.js

    rules:[{test:/\.css$/, use:['style-loader','css-loader','postcss-loader']}]
    

    postcss.config.js

    module.exports={
        plugins:[
            require(autoprefixer)//需要这个插件
        ]
    }
    
    • file-loader

    读取并且输出任何类型的文件(图片,文件之类的),当use有参数时,就需要这样子用

                {test:/.(jpg|png|gif)$/i, use:{
                    loader:'file-loader',
                    options:{
                        outputPath:'images/',
                    }
                }}
    

    outputPath是输出的路径

    loader是选择使用的loader

    • url-loader

    读取并且输出base64

                {test:/.(jpg|png|gif)$/i, use:{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',
                        limit:500*1024
                    }
                }}
    

    url-loader就多一个limit选项,是最小界限,这里是设置了凡是低于500k的文件都编译成base64,正常是设置成32K为一个界限,32K以上就输出一个文件,一下就编译成base64放到js文件中去

    url-loader可以顶替点file-loader,因为功能多一点

    • less-loader编译less文件

    需要装两个包less-loader less

    less文件编译的时候,没法加载到页面,所以需要配合css-loader和style-loader一起使用

    {test:/\.less$/, use:['style-loader','css-loader','less-loader']}
    
    • babel-loader编译es6

    三个包 babel-loader @babel/core @babel/preset-env

    {test:/\.jsx?/i,//js或则jsx
                    exclude:/node_modules/,
                    use:{
                        loader:'babel-loader',
                        options:{
                            presets:['@babel/preset-env']
                        }
                    }
                }
    

    多一个选线,presets这个是babel的运行环境

    • source-map保留原始文件,方便查错
    devtool:'source-map'//开发工具
    

    在module后面加上这个 ,就可以使用source-map工具

    • 热更新webpack-dev-server

    下载包 webpack ,webpack-cli,webpack-dev-server

    在scripts中加上一句命令"start": "webpack-dev-server"

    命令行运行npm run start

    这里注意html的路径,dev-server生成的文件是在服务器上的,不是存在磁盘上的,html读取build里面的文件是不会发生改变的,要改为服务器的地址,即根目录上的文件

    • 代码质量-eslint

    下载包eslint,eslint-loader

    看需求配置吧

    .eslintrc文件配置

    {
      "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
          "jsx": true
        }
      },
      "rules": {
        "indent": ["error", 2],//缩进
        "linebreak-style": ["error", "windows"],//换行风格
        "quotes": ["error", "double"],//引号
        "semi": ["error", "always"]//分号
      }
    }
    
    

    webpack.config.js

    const path=require('path');
    
    module.exports={
      mode: 'development',//开发环境
      entry: './src/js/1.js',
      output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.min.js'
      },
      module: {
        rules: [
          {
            test: /\.js$/i,
            loader: 'eslint-loader',
            exclude: /node_modules/,
            options: {
    
            }
          }
        ]
      },
      devtool: 'source-map'
    };
    
    • 测试-jest

    下载包jest,jest-webpack

    需要一个点.test.js文件测试

    const mod = require('../src/js/3.js')
    
    test('fab 7 ',()=>{
        expect(mod.fab(7).toBe(13))
    })
    

    3.js模块文件

    export function fab(n){
        if(n ==1 || n==2){
            return 1
        }else{
            return fab(n-1)+fab(n-2)
        }
    }
    

    如何处理除了js文件外的东西

    很简单,把文件读取出来变成字符串然后再输出

    先学习到这里,之后在项目中用到了,才有深刻的体验到打包工具的强大

    展开全文
  • 程序打包工具

    千次阅读 2018-07-31 14:10:10
    1、利用inno setup  下载地址 ... ...   网上大神写了很多以及自带好多例子,可以直接参考了,这就不写了...2、利用微软的msi打包,这个很强大!  VisualStudio 2008 等都自带改功能   下面是转载的,在自己做安...
  • 5分钟了解打包工具原理

    千次阅读 2018-07-16 14:52:13
    整套SDK的核心思想,就是让我们的SDK接入成本,能够控制在1,而不是N。啥意思呢?就是,我们接入第一款游戏的时候,我接了这些SDK,当我接入第二款,第三款游戏的时候,这套SDK可以尽可能的复用,而不是每开发一款...
  • Qt程序打包发布方法(使用官方提供的windeployqt工具) Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,如果自己去复制dll,很可能丢三落四,导致exe在别的电脑里无法正常运行...
  • Advanced Installer是一款功能强大、可生成符合 MS Windows 认证的 Windows Installer 的 MSI 安装包制作工具,具有友好的图形用户界面,直观而且非常简单的界面,是一款很好的 Windows Installer 编写工具。...
  • 最近因为需求,需要把移动端网页打包成APP,本人一直是做网站开发...而且因为用的是网页开发,跨平台无压力,并且只用维护网站就够了,不得不说,HTML5确实挺牛,不多说,分享一下本人测试过的三款在线打包工具。 ...
  • Crass意指Crage和Assage两个工具的集合。Crage是使用cui插件扩展的游戏资源提取器;而Assage是使用aui插件扩展的游戏资源封装程序。  汉工用他的心血制作了 Crass,现在很多来求汉化,就是另外的Assage。  比如前...
  • ROM制作工具目前已经是windows下最强大的一键解包打包工具,极大程度提高了用户体验,目前已支持各种标准或非标准命名的ROM,真正让小白一键上手。目前已支持安卓8.0和安卓8.1的打包解包,不仅仅支持system.new.dat...
  • 对APK进行解包和二次打包(Android)

    万次阅读 2018-03-07 11:11:43
    某些情况下,在我们只需修改APK的一个配置或者是一张图片...这里推荐个人觉得比较方便的反编译工具AndroidKiller,网盘链接为 https://pan.baidu.com/s/1FL4jmWefY1PUCI8OM3C7WQ 使用的基本方法: 1.如图,将apk...
  • VS2017自带打包软件

    万次阅读 多人点赞 2018-06-16 20:20:41
    1、打开VS2017:工具 –&gt; 扩展和更新 –&gt; 联机,搜索Microsoft Visual Studio 2017 Installer Projects,如下图: 2、按提示安装好以后,重启vs2017 3、用VS打开编写的软件,右击项目 –&gt...
  • Windows如何打包Qt程序

    万次阅读 多人点赞 2012-04-24 21:57:32
    现在网上大部分软件都要发布自己开发的应用程序,都会打包到exe文件中,待安装完exe文件后,就会生成很多小文件,其实原理都一样,只是各自使用的打包工具不能罢了。本文主要介绍在Windows平台如何打包自己的Qt程序...
  • 1.选择一个要进行打包的java文件2.右键单击—>export3.选择Java—>JAR file 点击next4.选择需要打包的文件,写好jar文件的名字,和导出路径,点击finish完成
  • QT5打包教程(QT自带Windep打包工具)

    万次阅读 2016-12-11 21:57:52
    软件环境:Qt 5.7.0 操作系统:Win7 X86(32位)第一步:打开QT构建设置成Release状态运行,如下图所示:第二步:打开我们构建之后项目所在的位置,一般位置在C:\Qt\Myproject\build-xxx-Release,具体要根据你构建...
  • 常用打包制作安装程序软件

    千次阅读 2019-06-12 13:09:57
    做好软件之后我们需要将软件打包发布, ...windows下常用打包发布工具 Inno Setup Compiler汉化版 EasySetup 2.08 CreateInstall Setup Generator Installer VISE汉化精简版 Install Maker Pro ...
  • iOS-打包成ipa的4种方法

    万次阅读 2017-03-06 22:12:56
    上面文章已经提到了第一种 也是 最为实用的一种 打包上架api的方式,这里就不多少了。 打包ipa的前提 1、证书的申请和设置和上面文章的一样 从第一步到第四步都是一样的http://www.jianshu.com/p/cea762105f7c...
  • pyinstaller打包py文件为exe方法

    万次阅读 多人点赞 2018-07-11 16:34:33
    最近在github上找到了个基于opencv的连连看辅助程序。由于在学习PYTHON,就下载下来...贴上开源地址:https://github.com/TheThreeDog/Auto-Lianliankan百度了下py的打包工具,比较了下觉得pyinstaller打包较为简单...
  • winform程序打包EXE三种方式

    万次阅读 2018-07-02 09:39:40
    1.利用VS自带的打包工具教程:http://www.cnblogs.com/iiwen/p/5310184.html优点:微软自带的,而且大部分人都是用的这种发布方式,具有安装步骤。更专业缺点:使用步骤比较繁琐,而且安装文件的话需要其他的配置...
1 2 3 4 5 ... 20
收藏数 339,192
精华内容 135,676
关键字:

打包工具