（22）npm scripts 实践—构建样式文件

最新推荐文章于 2024-09-15 00:00:00 发布

泽哥ins

最新推荐文章于 2024-09-15 00:00:00 发布

阅读量155

点赞数

分类专栏： Node.js 文章标签： npm css sass

本文链接：https://blog.csdn.net/qq_36213140/article/details/122408609

版权

这篇博客介绍了如何利用npm scripts将Less转换为CSS，并进行压缩。通过安装`less`和`minify`全局包，然后配置`package.json`中的scripts命令，可以一键执行转换和压缩过程。在实际操作中，包括初始化项目、编写`index.less`、创建HTML文件，最终通过`npm run style`来运行脚本，实现CSS文件的自动化构建和优化。

摘要由CSDN通过智能技术生成

将 less 转成 css

安装less命令：npm i less -g

转换命令：lessc input.less output.css

压缩 css 文件

安装压缩包命令：npm i minify -g

压缩css文件命令：minify output.css > output.min.css

实现步骤

• 初始化项目（npm init --yes）

• 添加 scripts 命令（ less + minify ）

• 执行 scripts 命令（ npm run 命令）

index.less文件

/**
* body颜色
*/
@body-bg: #dff;
@body-color: #f00;
body {
  margin: 0 auto;
  padding: 0 20px;
  background-color: @body-bg;
  color: @body-color;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

泽哥ins

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

（31）Gulp 构建样式文件

Java田根旺

01-12

334

一、Gulp构建样式文件流程图 Gulp构建样式文件和我们之前想要实现的效果和流程差不多，我们通过源代码，这里拿less文件举例，第一步那么我们通过less文件先将文件进行转换，转换成浏览器认识的css文件，第二步将css文件进行压缩，压缩后的文件除去了空格和注释。第三步将压缩后的css文件改名为.min.css。二、Gulp构建样式文件所需插件三、在Gulp的官网去查找这些插件 https://gulpjs.com/ 打开Gulp官网我们可以再nav导航栏处看到plugins插件列表

Vue+element ui系列：npm run dev --ld 来实现样式的条件编译，使用到了js-conditional-compile-loader插件

浪潮行舟_chenjin2136

04-20

381

问题来了，样式的条件编译我想用以下两个方式实现，都遇到了问题，找了一些资料，最终解决方案是设置。最终实现样式的条件编译，用的同一套代码，有个列表显示数据不一致，通过条件编译实现显示不同的列表。xxx是在webpack中指定的条件属性名，如上面的isHK。插件支持IFDEBUG和IFTRUE两个条件编译指令。进行如下设置后，样式的条件编译实现。用法是：在js代码的任意地方以//结尾，中间是被包裹的js代码。versionType为1或2。时versionType为1。可以看到舱门管理被隐藏。

参与评论您还未登录，请先登录后发表或查看评论

（25）npm scripts 实践—构建脚本文件

Java田根旺

01-10

329

一、先来看2张对比图通过如下2个图片，我们看到，我们应该构建好以后再进行浏览器中运行。没有构建前是ES6的箭头函数写法，我们要转换成ES5的写法然后再运行。为什么要构建？因为ES6再某些浏览器是不支持的，所以需要转换成ES5写法。二、示例通过如下示例我们可以看到，我们使用ES6语法的箭头函数，执行了一个点击事件，当点击的时候触发函数，弹出一个警示框，我们分别再IE浏览器和谷歌浏览器中进行测试发现，谷歌浏览器实现了效果，说明谷歌浏览器兼容ES6写法，而IE浏览器呢我们再点击的时候没有任何效

基于NPM Scripts完成简单的自动化构建---入门

杜杜的博客

06-15

181

自动化构建简介什么是自动化：机器代替手工完成一系列工作。什么市构建：转换，什么市自动化构建工作流: 指把我们开发阶段写出来的源代码自动化转换成生产环境中可以运行的代码或者程序。自动化构建简介作用： 1.脱离运行环境兼容带来的问题 2.使用提高效率的语法、规范和标准最典型的应用场景我们开发网页应用时，使用 1.ECMAScript Next:提高编码质量 2.sass :来增强css的可编程性， 3.模版引擎:来抽象页面中重复的html 这些

vue npm run build 与npm run dev 样式不同

欢迎所有人，批评指正！

10-21

2167

添加 scoped,可以试试 <style scoped> </style>

实现 npm script 命令自动补全

YunWisdom

07-27

928

实现 npm script 命令自动补全当 npm script 里面积累的命令越来越多时，重度命令行用户肯定会好奇，能不能实现类似 bash、zsh 里面的命令自动补全？答案是肯定的，下面来逐一介绍。使用 npm run 直接列出前面章节有过介绍，不带任何参数运行 npm run 能列出 scripts 对象中定义的所有命令，再结合管道操作符、less 命令（这里的 less 不是 css 领域的 less，而是 linux 里面的工具），即使 scripts 子命令很多我们也能移动.

markdown npm

02-06

5. **脚本执行**：`package.json` 中的 `scripts` 字段允许定义自定义的命令，如 `npm run build` 可以运行构建脚本。 6. **依赖管理**：npm 可自动解决依赖关系，避免版本冲突，使用 `npm ls` 查看依赖树。 7. **...

详解node.js中的npm和webpack配置方法

10-18

开发者可以通过npm run命令来运行Webpack配置，这通常在package.json文件的scripts字段中定义。例如，"build": "webpack"命令会在执行npm run build时运行Webpack，并生成打包后的文件。总结来说，Node.js、npm和...

在线聊天室前端工程源码，下载下来后通过npm init初始化依赖包，然后通过npm run server命令启动项目即可访问

05-01

`npm run server` 是一个npm脚本命令，通常是指定在`scripts`字段下定义的命令，如`"server": "node server.js"`。这表明源码中包含了一个服务器端的实现，可能是用Node.js写的，用于处理HTTP请求和WebSocket连接。...

安装pygame的步骤

haha73457的博客

09-09

484

1.安装上python，设置好python的变量路径 2.cmd中命令查看pip是否安装上 3.下载pygame解压到python安装文件的lib文件里 4.在python输入import pygame ，就安装上pygame了

vue canvas 方法无效_安装 webpack 搞定 Vue 打包

weixin_39567943的博客

11-24

500

作者：Lefex转发链接：https://mp.weixin.qq.com/s/nCjUZgQMzOSHZ2Z05LuvqA前言webpack 是一个通过 node.js 实现的工具，本节内容核心掌握 webpack 的安装和使用，并掌握如何通过 webpack 打包 vue 项目。通过 npm 安装步骤：1、创建一个文件夹 day1，然后在这个文件夹下执行 npm init，目的是生成一个 pa...

npm stripts 使用指南

weixin_33901641的博客

05-06

268

Node 开发离不开 npm，而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本（npm scripts）。一、什么是 npm 脚本？ npm 允许在package.json文件里面，使用scripts字段定义脚本命令： { // ... "scripts": { "build": "node build.js" } } ...

npm Scripts使用教程【译】

weixin_30443075的博客

02-22

244

Why npm Scripts? 原文发表于 2016.2.12，原文地址：https://css-tricks.com/why-npm-scripts/ 以下是访客Damon Bauer发布的一篇文章。近来直接使用node package提供的命令行界面的情绪持续高涨，反之，人们对通过运行任务从而屏蔽抽象功能的热情逐渐降温。在一定程度是，你无论如何都要使用npm，而同时npm提供了脚本...

初识Shell Scripts编程--最最简单的shell例子

懂幸福，爱生活

07-31

4020

前段时间因为要往一个文件写入一系列随机数给大家用，自己用C语言写了一个，把源文件发给大家，然后大家还要编译，运行，有时候里面的代码需要修改重新编译运行，很是麻烦，其实这些都可以用简单的Shell Scripts来完成。来看第一个程序，sh01.sh：显示"Hello World!" #!/bin/bash #这个一行在宣告这个script使用的shell名称，因为我们用的是bash

Vue创建一：创建项目及样式引入

weixin_34409357的博客

06-25

119

一、基础创建 1、首先安装vue-cli npm install -g vue-cli 2、创建一个使用webpack模板的项目 vue init webpack my-project 3、进入目录 cd my-project 4、安装依赖 npm install 5、启动vue项目 npm run dev 二、项目中安装和引入sass npm install nod...

切换淘宝最新镜像源npm