pycharm找不到python打包工具,python安装外部包
谈论吞咽
第一步：安装gulp:
全局：npm i吞咽-g启动器
本地：npm我吞下核心库
步骤2:编写配置：
gulpfile.js
总之，有些管道已经在处理流操作和任务功能。
您可以使用多个任务来处理一种格式文件，例如js文件。
Gulp.task (js ，()={return xxx})任务的函数，所有的处理都是在返回，xxx可以做需要的Gulp操作。
以下是gulpfile.js文件(运行gulp时需要)
const gulp=require( gulp )const uglify=require( gulp-uglify )gulp . task( js ，()={return gulp.src ([。/src/js/*。js ])//stream operation . pipe(uglify())。管道(gulp.dest(。/gulp/js )})gulp . task( default ，
gulpfile文件中必须有一个具有默认属性的任务函数，否则您将不得不一个接一个地运行任务。默认是总输出，意思是你在里面写了多少任务，它都会输出返回gulp.src([])。这里之所以把数组放在gulp.src([])中，是因为可能存在多种格式的文件。所以这里我用了一个数组。管道(uglify())是用uglify包压缩的，管道是流。用node压缩过的人都知道，pipe(gulp.dest())是输出目录，要输出的路径写在dest里。一些吞咽包装的使用
Const Gulp=require( Gulp )Const uglify=require( Gulp-uglify )Const concat=require( Gulp-Concat )Const Rename=require( Gulp-CSS min )Const imagemin=require( Gulp-CSS min )Const Imagemin=require( Gulp-Imagemin )Concat合并包重命名重命名包cssmin css压缩包Imagemin图片压缩包Concat使用
Gulp.task (js ，()={return gulp.src ([。/src/JG/* */*。js])。管道(concat (bundle.min.js ))。管道(uglify())。管道(
重命名用途
gulp.task(js ，()={ return gulp.src([。/src/jg/**/*。js]) //。管道(concat(bundle.min.js ))。管道(uglify())。管道(重命名({ 后缀:)。min}))。管道(gulp.dest(。/Bulid/JS)}}在输出之前，使用rename({suffix:name})以便修改需要输出的文件名。
cssmin的使用
Gulp.task (css ，()={return gulp.src ([。/src/css/* */*。CSS])。管道(concat (style.min.css ))。管道(cssmin())。烟斗(大口.
imagemin的使用
gulp.task(image ，()={ return gulp.src([。/src/image/**/*。jpg ，。/src/image/**/*。png ，/src/image/* */*。gif])。pipe(imagemin([imagemin . gif sicle({ interleaved:true }))，//逐步加载imagemin . JPEG tran({ propressive:true })，imagemin . optipng({优化级别：5 })//优化级别])}) Image有很多参数，需要配置三个参数分别处理jpf、gif和png。
之后会用webpack，所以gulp要稍微研究一下。
Webpack webpakc.config.js配置文件
Module.ewports={mode: ，entry: {}，output: {path，filename}，module: {rules: []}} mode: mode，包括生产模式和开发模式。
Entry: entry，string是单条目，json是多条目。
由output:path和filename生成的文件地址文件名[name]是一个占位符。
模块：模块，添加加载器，从后面读取。
加载程序(核心)处理css
Css-Loader样式-加载器规则：[{test:/\。css $/，使用：[style-loader ， css-loader]}]就可以处理打包css的文件。
浏览器兼容性
postcss-loaderautofixer可以处理浏览器兼容性，并帮助您生成兼容的前缀。
Postcss-loader需要一个配置文件，postcss.config.js
规则：[{test:/\。css$/，使用：[style-loader ， css-loader ， post CSS-loader ]}]post CSS . config . js
module . exports={ plugins:[require(AutoPrefixer)//此插件是必需的]}文件加载器读取并输出任何类型的文件(图片、文件等)。)，这在use有参数时是必需的。
{测试：/。(jpg png gif) $/i，使用：{loader: file-loader ，选项：{outputpath: images/，}} outputpath是输出的路径。
加载器是选定的加载器。
Url加载器读取并输出base64。
{测试：/。(jpg png gif) $/i，使用：{loader: URL-loader ，选项：{输出路径： images/，限制：500 * 1024}} URL-loader还有一个限制选项，这是最小限制。这里设置了500k以下的文件全部编译成base64。正常情况下设置为32K作为限制，输出一个32K以上的文件，然后编译成base64放入js文件。
url加载器可以取代点文件加载器，因为它有更多的功能。
用两个包编译更少的文件。
少文件编译时无法加载到页面上，需要和css-loader、style-loader一起使用。
{测试：/\。less $/，使用：[style-loader ， CSS-loader ， less-loader]} Babel-loader编译es6三个包Babel-loader @ Babel/core @ Babel/preset-env
{测试：/\。jsx？/i，//js或jsx exclude:/node _ modules/，use: {loader: babel-loader ，options:{ presets:[ @ babel/preset-env ]} }多一行选择，并且presets是Babel的运行环境。
Source-map保留原始文件，以便于错误检查。devtool:source-map//开发工具在模块后面加上这个，就可以使用source-map工具了。
更新hot webpack-dev-server下载包webpack，web pack-CLI，webpack-dev-server
向脚本添加命令“start”:“web pack-dev-server”
运行命令行npm运行启动。
这里注意html的路径。dev-server生成的文件在服务器上，而不是在磁盘上。html读取build中的文件不会改变，只是服务器的地址，也就是根目录中的文件。
代码-eslint下载包eslint，eslint-loader
看需求配置。eslintrc文件配置
{ parser options :{ ECMA version :6， sourceType: module ， ecmaFeatures: { jsx: true } }， rules: { indent: [error ，2]，//Indent Line break-style :[ error ， windows]，//换行样式 quotes: [error ， double]，//引号 semi: [error ， always]//分号}} Webpack.config
const path=require( path )；module . exports={ mode: development ，//开发环境条目：。/src/js/1.js ，输出：{path: path.resolve (_ _ dirname， build )，文件名： bundle.min.js}，模块：{ rules: [ { test: /\。js$/i，loader: eslint-loader ，exclude: /node_modules/，options: { } } ] }，dev tool: source-map }；测试jest下载包jest，jest-webpack
需要一分。要测试的test.js文件
Const mod=require(./src/js/3.js )测试( fab7 ，()={expect (mod.fab (7))。tobe (13))}) 3.js模块文件
function fab(n){ if(n==1 n==2){ return 1 } else { return fab(n-1)fab(n-2)} }如何处理js文件以外的东西很简单。将文件读入字符串，然后输出。
只有学到这里，然后在项目中使用，才能深刻体会到打包工具的强大。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。