使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器 gulp不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成...gulp是基于Nodejs的自动任务运行器， 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...//安装插件 npm install gulp-imagemin --save-dev //图片压缩 npm install gulp-cssnano --save-dev //css压缩 npm install...uglify --save-dev //js压缩 npm install gulp-jshint --save-dev //js规范检查 npm install gulp-concat --save-dev...suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/js/')); }) //图片压缩
开场 工作中会经常用到npm install或是npm update，那这两个命令有什么区别呢 可以用一个文件来看下 { "name": "my-project", "version...not-yet-installed-versioned-module": "2.7.8" // installs installs } } 由此可以看到两者之间的差别就是对于已经安装的包，没有明确版本号的 npm...install会忽略 npm update会升级 其他 另外， install和update在devDependecies上也是有差别的 npm install默认会安装devDependecies，...除非加上--production参数 npm update不会默认安装，除非手动加上--dev参数 install的其它功能 手动安装某个指定的包 全局安装，npm i -g 从某一个git版本安装或是...git url安装，npm install git+ssh://git@github.com:npm/cli.git#v1.0.27 强制重装, npm install --force 参考： stackoverflow.com
压缩文件 11. webpack-dev-server 搭建本地服务器 前言 ---- 本文记录 webpack 的安装和使用，并且使用 webpack 搭建 vue 简易脚手架的过程 通过本文可以对...局部安装 ---- 初始化 npm 项目（有交互命令，一路回车即可） npm init 安装 webpack，其中 webpack: 核心模块 webpack-cli: 命令行工具 npm install.../src/main.js ./dist/bundle.js webpack 5 执行打包 webpack ./src/main.js -o ....打包 css 文件 ---- 新建 css 文件, 并且在 main.js 中依赖 css 文件 require('....压缩文件 ---- webpack 5 自带的压缩插件 npm install terser-webpack-<span class="hljs-keywo
；什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样...； 运行npm i nrm -g全局安装nrm包； 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址； 使用nrm use npm或nrm use taobao切换不同的镜像源地址...网页加载速度慢， 因为 我们要发起很多的二次请求； 要处理错综复杂的依赖关系 如何解决上述两个问题 合并、压缩、精灵图、图片的Base64编码 可以使用之前学过的requireJS、也可以使用webpack...如何完美实现上述的2种解决方案 使用Gulp， 是基于 task 任务的； 使用Webpack， 是基于整个项目进行构建的； 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩...npm i webpack --save-dev安装到项目依赖中 初步使用webpack打包构建列表隔行变色案例 运行npm init初始化项目，使用npm管理项目中的依赖包 创建项目基本的目录结构 使用
端点 目前仅支持使用 /gh 和 npm，并且自动开启 HTTPS 访问与 Gzip 压缩。...NPM NPM 文件来源于 www.npmjs.com，将自动转换路径并获取文件 Hex，API 如下： /npm/[PACKAGE_NAME]@[VERSION]/[FILE] 请求链接例如： https...npm/@detalk/static@1.3.2/dist/detalk.js https://s.cky.qystu.cc/npm/@detalk/static@1.2/dist/detalk.js...自动压缩 除 Gzip 压缩外，目前 CKY#JSEW 还兼容部分文件的自动压缩功能。...例如，请求 main.min.js 文件，而目录下无对应文件，只有 main.js，那么则会自动获取 main.js 并进行压缩返回。
除此之外，打包工具可以压缩代码，做兼容性处理，提升代码性能等。 2.打包工具分类 Grunt Gulp Webpack vite ..............本篇文章主要写Webpack 3.webpack的使用 分为开发模式和生产模式 首先介绍webpack的简单使用 安装 webpack webpack-cli npm i webpack -D npm.../main.js --mode=development webpack就是将不能识别的语法编译成可以识别的语法，目前只能处理js资源。.../config/webpack.prod.js" }, 此时运行程序时使用npm start即可 提取css成单独文件 单独打包生成css，防止闪屏, 安装npm install --save-dev..."); 在plugins中使用 new CssMinimizerPlugin(), html压缩 配置生产模式，html和js默认压缩，不需要额外进行配置
Npm: Node Package management node包管理工具； npm :Npm -v ------npm install 模块名称 下载相关模块 安装完毕后，会在当前路径下自动创建...node_modules 这个文件夹 ------Npm ls 显示当前安装的模块 -------Npm uninstall 模块名称 卸载当前模块 ------Npm root 显示模块安装的位置...创建package.json Npm init 必须有两个键值对”name”:”value”, “version”:”value” -----2....在安装模块的时候可以通过npm install 模块名称 --save 把模块添加到package.json的dependencies中 ------4....以后再创建任何项目【文件夹】的时候，第一步就是先创建package.json文件 急速创建package.json的方式： npm init --yes
问题 打包白屏 IE白屏 打包后清除控制台所有console信息 js\css压缩问题 解决 问题1. 打包白屏 描述 npm run build打包后，生成 dist文件夹。.../src/main.js']; } } 入口引入相关插件 src/main.js // 解决ie白屏问题 import '@babel/polyfill' import Es6Promise from...问题4. js\css压缩问题 描述在打包成功后，为了缩小包体积，提高页面响应速度，一般会对包进行压缩，此处主要针对js\css来处理。...方案 安装插件 npm install compression-webpack-plugin --save-dev 配置 vue.config.js中的configureWebpack // 压缩css.../src/main.js']; // 修复HMR config.resolve.symlinks(true); // //修复 Lazy loading
npm不需要单独安装。在安装Node的时候，会连带一起安装npm。...但是，Node附带的npm可能不是最新版本，最好用下面的命令，更新到最新版本: $ npm install npm@latest -g 查看版本信息： $ npm -v 2.npm init 用来初始化创建一个...$ npm info babel-cli 4.4、npm search 用来搜索npm仓库 $ npm search 5、npm list 以树形结构列出当前项目安装的所有模板，以及它们依赖的模板...install react --save $ npm install react -S $ npm install react --save-dev $ npm install react -D npm...8、npm update,npm uninstall 更新和卸载 $ npm update $ npm uninstall 9、npm run
npm（Node package manager） 使用介绍 解决包之间的依赖关系 需安装node.js 下载后安装即可 npm -v node -v 更新npm npm...install npm@5.4.0 -g npm install npm@latest -g # -g 表示全局环境，只有这样，npm才可以在任何目录识别 修改镜像地址： npm config...set registry https://registry.npm.taobao.org # 安装cnmp以后使用cnmp就是使用国内进行，推荐 npm install -g cnpm --registry...cd 20.2 # 进入文件夹 npm init -y # 初始化文件---》会生成package.json y表示默认参数 npm i jquery --save # 安装jquery -----...，即可还原所有node_modules npm i # 当不需要时卸载即可 npm uninstall xxx # 更新 npm update jquery # 指定版本 npm install jquery
我们可以对图片进行压缩，减少体积 注意：如果图片是在线链接则不需要，本地图片则需要打包 是什么 image-minimizer-webpack-plugin用来压缩图片的插件 怎么用 下载 npm i...image-minimizer-webpack-plugin imagemin -D 无损压缩 npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng...imagemin-svgo -D 有损压缩 npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant， imagemin-svgo...在html文件中写点击按钮 main.js按需引入测试如下 document.getElementById("btn").onclick = function () { import("....是什么 专门做es6及以上api的polyfill(补丁) 怎么用 修改main.js 安装包 npm i core-js 完整引入 在main.js中引入：import "core-js" 按需加载
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。...创建列表隔行变色项目 ① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index.html...执行命令解析： npm run dev npm run dev 真正执行的是 webpack 命令，dev 名称可自定义 [在这里插入图片描述] asset表示资源，生成的资源为 main.js，默认会放在...dist 文件夹下 main.js 里面包含了 index.js 和 jquery.js 代码，webpack把这两个文件合并成一个文件了，最终生成了 main.js 文件 [在这里插入图片描述] 打开...main.js 可以查看到 index.js 和 jquery.js 这两个文件的内容 [在这里插入图片描述] [在这里插入图片描述]
之前有用过typescript进行开发，用tsc打包后，再用脚本将所有js进行合并，然后再用uglyjs压缩js，但是最终报错了，原因就是合并js的顺序问题，后来用脚本指定合并js的顺序。...安装依赖 demo/目录下： npm install typescript -save-dev npm install ts-loader -save-dev npm install path -save-dev...npm install webpack -save-dev npm install webpack-cli -save-dev npm install @types/lodash -save-dev...npm install @types/node -save npm install lodash -save 3....", "module": "out/main.js", "files": [ "build", "dist", "src", "out", "LICENSE.md
552 KiB main [emitted] main Entrypoint main = main.js [....现在在 dist/index.html 中引入打包后的 main.js，打开浏览器测试： <script src="....<em>压缩</em> CSS 使用 optimize-css-assets-webpack-plugin <em>压缩</em> CSS 的插件。...<em>压缩</em> JS 使用 uglifyjs-webpack-plugin <em>压缩</em> JS 的插件。...； parallel：是否启用并行<em>压缩</em>； sourceMap：是否启用 sourceMap； 然后重新打包，查看 <em>main.js</em>，已经被<em>压缩</em>了： 七、webpack 为文件名添加 hash 值 由于我们打包出来的
其次我们创建一个入口并写入如下代码： // src/main.js import say from '....—将CommonJS模块转换为 ES2015 供 Rollup 处理 rollup-plugin-babel — 让我们可以使用es6新特性来编写代码 rollup-plugin-terser — 压缩...js代码，包括es6代码压缩 rollup-plugin-eslint — js代码检测 打包一个库用以上插件完全够用了，不过如果想实现对react等组件的代码，可以有更多的插件可以使用，这里就不一一介绍了...这里我们主要用来设置在开发环境下不压缩代码： const isDev = process.env.NODE_ENV !== 'production'; // ... plugins: [ !...如果你是之前没有注册npm账号，你可以通过如下方式配置： npm adduser 然后输入用户名，邮箱，密码，最后使用npm publish发布。
NPM 1. NPM简介 1.1 创建一个package.json文件 1....npm 命令 作用 例子 备注 npm help 可查看所有命令 npm help 可查看某条命令的详细帮助 npm help install npm install npm...npm cache clear 清空NPM本地缓存 npm unpublish @ 可以撤销发布自己发布过的某个版本代码 npm view xxx versions...npm 2 和npm 3包管理方式的变化。...NPM 常用场景的组合命令 3.1 npm更新package.json中依赖包的版本到最新 安装：npm install npm-check-updates -g、npm install npm-check
最近在弄 Ant Design Ui ，执行npm install的时候一直报错： npm ERR! cb() never called! npm ERR!...This is an error with npm itself....这个问题困扰了我几天，网上答案五花八门，不过对我来说，那些方法都没有效果，记录一下我解决这个错误的步骤，如下： 1.删除下载好的node_modules 以管理员权限执行下面的命令： 2.清除npm...缓存 npm cache clean --force 3.npm install 大功告成！
网络问题️ npm的默认地址是国外的，在下载依赖时，由于网速问题可能会导致这样那样的错误～ # 查看自己的安装源 npm config get registry # 更换npm源为国内淘宝镜像 npm...config set registry http://registry.npm.taobao.org/ # 或者国内npm官方镜像 npm config set registry http://registry.cnpmjs.org.../ # ----- 还原npm源 ------ npm config set registry https://registry.npmjs.org/ 版本不适配 如果上面的方法没有解决问题，那检查一下是不是版本不适配导致的...首先删除原来的node和npm sudo npm uninstall npm -g sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules.../var/db/receipts/org.nodejs.* sudo rm -rf /usr/local/include/node /Users/$USER/.npm sudo rm /usr/local
在做的web项目上线时，我们需要对js文件进行压缩，以减小文件的体积，加快加载速度，提高响应时间。下面我来介绍一个js压缩工具：uglifyjs。...安装uglifyjs 前提是必须安装过了nodejs，这里不再说，直接说如果安装uglifyjs npm install uglify-js -g 通过命令行全局安装，以便于以后压缩时随处可以执行命令。...这里npm也可以替换为cnpm 使用 安装完成了，接下来就是使用了。...最简单的使用方式： uglifyjs main.js -o main-min.js -c 下面是一些压缩时常用的参数 一些常用的参数列表 -o,--output 指定输出文件，默认情况下为命令行...--comments 用来控制注释的代码的 如果压缩的时候想要保留版权信息，可以如下使用： uglifyjs main.js --comments -m -o main-min.js 当然，
npm安装模块 【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录； 【npm install -g xxx】利用npm安装全局模块xxx； 【npm install...xxx】安装但不写入package.json； 【npm install xxx –save】 安装并写入package.json的”dependencies”中； 【npm install xxx...npm 删除模块 【npm uninstall xxx】删除xxx模块； 【npm uninstall -g xxx】删除全局模块xxx；
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
