npm构建脚本_使用npm脚本在CSS中设置简单的构建过程

npm构建脚本

As a beginner, I use to just write my CSS in a single file(s) and that was all! — I didn’t care if it was compatible with the different versions and types of browsers out there, how it got loaded in the browser, and other little perks that make CSS more browser-friendly. Until I started using a build a process on my CSS, I became a CSS ninja on another a level — hope you achieve that ninja status after reading this article.

作为一个初学者，我曾经只在一个文件中编写CSS，仅此而已！ —我不在乎它是否与现有的不同版本和类型的浏览器兼容，如何在浏览器中加载以及其他使CSS对浏览器更加友好的特权。 在开始在CSS上使用构建过程之前，我在另一个层次上成为了CSS忍者-希望您在阅读本文后达到该忍者的身份。

介绍 (INTRODUCTION)

This article is basically for beginners or code newbies( as we are fondly called by the “older guys”) in the web development space, anyway, everyone is welcome — we’re all digital citizens after all, right. You are going to learn how to make your CSS, browser compatible, load faster, and Production-ready — just like a pro👌.

本文基本上是针对Web开发领域中的初学者或代码新手(我们被“老年人”称呼)的，无论如何，欢迎所有人-毕竟我们都是数字公民，对。 您将学习如何像专业人士一样，使CSS，浏览器兼容，加载速度更快以及生产就绪。

目录 (TABLE OF CONTENTS)

— What Is A Build Process ⚒⛏🛠

—什么是构建过程⚒⛏🛠

— Implementing A Build Process In CSS: Conceptual Overview🛢

—在CSS中实现构建过程：概念概述🛢

— Creating the Build Process with NPM Scripts🎨

—使用NPM脚本创建构建过程🎨

演示地址

什么是构建过程？(WHAT IS A BUILD PROCESS?)

A build process is basically a sequence of tasks, that is performed automatically after the development of a product(website or app) or a certain feature of the product, and the result of the process can be one or more final file(s) of the code which is then ready for production — Ready to be deployed to a web server.

构建过程基本上是一系列任务，在开发产品(网站或应用程序)或产品的某些功能后会自动执行，过程的结果可以是一个或多个最终文件。然后准备生产的代码—准备部署到Web服务器。

演示地址

在CSS中执行构建过程：概念概述(IMPLEMENTING A BUILD PROCESS IN CSS: CONCEPTUAL OVERVIEW)

Let’s now look at how a build system works first before implementing one with our npm scripts — think of it as a pseudo-code.

现在让我们看看在使用npm脚本实现构建系统之前，构建系统是如何首先工作的-将其视为伪代码。

1. MAIN.SASS FILE: We first start with our main sass file this the raw material we want to process (basically your CSS code, written in sass) which is then compiled to a CSS file — Hopefully you already use sass, if not just GOOGLE IT, it’s basically just CSS with superpowers as it name implies “syntactically awesome style sheets.”

   MAIN.SASS文件：我们首先从我们的主要sass文件开始，将要处理的原材料(基本上是您CSS代码，用sass编写)，然后将其编译为CSS文件-希望您已经使用了sass，即使不仅仅是GOOGLE IT ，它基本上就是具有超能力CSS，顾名思义就是“语法上很棒的样式表。 ”

2. STYLE.COMP.CSS FILE: This compiled CSS file is then merged with every third-party CSS file e.g an icon-font file, this process is called concatenation.

2. STYLE.COMP.CSS文件：然后，将此编译CSS文件与每个第三方CSS文件(例如，图标字体文件)合并，此过程称为串联。

3. STYLE.PREFIX.CSS: Then we add prefixes(browser prefixes) to our code(concat.css file), which allows our CSS code to be compatible(run) with different browsers and their various versions this known as prefixing— making our code one size fits all, cool right.

3. STYLE.PREFIX.CSS：然后我们添加前缀(浏览器前缀)到我们的代码(concat.css文件)，它可以让我们CSS代码兼容(运行)用不同的浏览器及其各种版本的这种被称为前缀-决策我们的代码大小适合所有人，很酷。

4. STYLE.CSS: Our prefixed code is finally then compressed(smaller file size), through a compression process(called compression — obviously) to our production code — Phew finally😊.

4. STYLE.CSS：最后，我们的前缀代码通过压缩过程(显然称为压缩)被压缩(文件大小更小)，最终成为我们的生产代码Phew 。

Now we are done with the conceptualization of the build process, it’s now time crunch and munch some code yeah!💃 — npm commands basically, not really code though.

现在，我们完成了构建过程的概念化，现在是时候紧缩一下，乱码一些代码了！💃—基本是npm命令，虽然不是真正的代码。

演示地址

使用NPM脚本创建构建过程(CREATING THE BUILD PROCESS WITH NPM SCRIPTS)

First things first, before going into the land of the “Scripts” let us pay our obeisance to the gatekeeper, meet NodeJs protector of the land of the “Scripts” — That’s actually a joke, But on a more serious note we can’t work with npm without installing NodeJs on our machine, So that’s the first step before anything else, you can do that here now. So below we are going to be installing some dependencies(tools we will use for the build process) and also explaining the roles they perform in the build process.

首先，在进入“脚本”领域之前，让我们向网守致敬，与NodeJs保护“脚本”领域的保护者见面-这实际上是个玩笑，但更严重的是，我们不能使用npm无需在我们的机器上安装NodeJ ，因此这是第一步，您现在就可以在这里完成。 因此，下面我们将安装一些依赖项(用于构建过程的工具)，并解释它们在构建过程中所扮演的角色。

INSTALLING DEPENDENCIES

安装依赖

The dependencies we are going to be installing are all devDependencies(modules required only during the development process), To start a new project we use npm init --y (--y is for default values).

我们将要安装的依赖项全部是devDependencies (仅在开发过程中需要的模块)，为了开始新项目，我们使用 npm init --y (-- --y是默认值)。

Compilation: For the compilation part of our build process we are going to install node-sass, which will basically allow us to compress our CSS and also compile .SCSS to CSS.

编译：在构建过程的编译部分，我们将安装node-sass ，这将基本上使我们能够压缩CSS并将.SCSS编译为CSS。

Concatenation: To concatenate(merge multiple files to one) our files, we install concat.

串联：要串联(将多个文件合并为一个)我们的文件，请安装concat 。

Prefixing: To prefix our code we install autoprefixer and postcss-CLI — autoprefixer prefixes our CSS code automatically, and it is also a plugin of postcss-CLI, which also make postcss-CLI a requirement.

前缀：要为我们的代码添加前缀，我们需要安装autoprefixer和postcss-CLI — autoprefixer自动为我们CSS代码添加前缀，它也是postcss-CLI的插件，这也使postcss-CLI成为必需。

Finally, we will install npm-run-all — a CLI tool that allows us to run multiple npm-scripts in parallel or sequential order.

最后，我们将安装npm-run-all-一个CLI工具，该工具可让我们以并行或顺序运行多个npm-scripts。

Run this command on your terminal to install the above dependencies npm install node-sass concat autoprefixer postcss-cli npm-run-all --save-dev

在终端上运行此命令以安装以上依赖项npm install node-sass concat autoprefixer postcss-cli npm-run-all --save-dev

WRITING SCRIPTS TO EXECUTE

执行脚本

Below is the Script we will write in our package.json file to enable our dependencies to execute their various functions in the build process, don’t worry if you don’t understand any part, I will explain each one.

下面是我们将在package.json文件中编写的脚本，以使我们的依赖项能够在构建过程中执行其各种功能，如果您不了解任何部分，请不要担心，我将逐一解释。

EXPLANATION

说明

These scripts(or tasks) can run by simply typing npm run <your-command-name> to your terminal.

只需在终端输入npm run <your-command-name>即可运行这些脚本(或任务)。

The symbols that will be used below will mean.

下面将使用的符号表示含义。

📌= package name

📌=包裹名称

📕= file to input

📕=要输入的文件

📘= file to output

📘=要输出的文件

1. compile:sass(1. compile:sass)

• node-sass: 📌 package name

  node-sass ：📌软件包名称

• sass/main.scss : 📕 address of our manually written sass file(raw material)

  sass/main.scss ：manually手动编写的sass文件的地址(原始材料)

• css/style.comp.css: 📘 address where the resulting output of css file will be stored.

  css/style.comp.css ：📘将存储css文件生成的输出的地址。

2。 concat:css (2. concat:css)

If you have your css in more than one file(including third-party css), then you’d probably want to combine them into one css file which is better for your browser which only would have to make one HTTP request instead of two.

如果您的css包含多个文件(包括第三方css)，那么您可能希望将它们组合成一个css文件，这对您的浏览器来说更好，它只需要发出一个HTTP请求而不是两个。

• concat : 📌 package name

  concat ：📌软件包名称

• -o / --output : denotes the output file

  -o / --output ：表示输出文件

• css/style.concat.css: 📘 address of output file where all combined css is going to be stored

  css/style.concat.css ：output将存储所有组合的css的输出文件的地址

• css/style.comp.css: 📕 file returned from step 1

  css/style.comp.css ：📕步骤1返回的文件

• css/any-other-file.css: 📕 any other css file which needs to be combined in the final.

  css/any-other-file.css ：📕其他任何需要在最终合并的css文件。

3. prefix:css (3. prefix:css)

This is the command with which your css is going to have vendor prefixes like -webkit-, -moz, -ms- and -o-, which otherwise you'd have to add manually.

这是与你CSS将不得不供应商前缀，如命令-webkit- ， -moz ， -ms-和-o- ，否则你必须手动添加。

How and why you would want to use CSS vendor prefixes in your website?

您想如何以及为什么要在网站中使用CSS供应商前缀？

• postcss : 📌 package name (autoprefixer is a part of postcss)

  postcss ：📌软件包名称(autoprefixer是postcss的一部分)

• --use : list of postcss plugins to use (i.e autoprefixer, here)

  --use ：要使用的postcss插件列表(即autoprefixer ，在此处)

• autoprefixer : package name which prefixes our css

  autoprefixer ：以我们CSS autoprefixer软件包名称

• -b : b is for browsers so we can specify which browsers to make our css compatible for

  -b ：b用于浏览器，因此我们可以指定使CSS兼容的浏览器

• "last 10 versions" : this fetches last 10 versions of all major broswers from caniuse.com

  "last 10 versions" ：从caniuse.com获取所有主要浏览器的最后10个版本

• css/style.concat.css :📕 address of file we're going to put

  css/style.concat.css ：📕我们要放入的文件地址

• -o : option for output

  -o ：输出选项

• css/style.prefix.css :📘 address of output file

  css/style.prefix.css ：📘输出文件的地址

4. compress:css(4. compress:css)

This will reduce your css file size to a great extent resulting in faster page loads.

这将在很大程度上减小css文件的大小，从而加快页面加载速度。

• node-sass : 📌 package name

  node-sass ：📌软件包名称

• css/style.prefix.css : 📕 file containing the input for this command (uncompressed css)

  css/style.prefix.css ：包含此命令输入的📕文件(未压缩CSS)

• css/style.css : 📘 address of the output file (compressed css)

  css/style.css ：输出文件的地址(压缩CSS)

• --output-style compressed : command to make the compression

  --output-style compressed ：进行压缩的命令

5. build:css(5. build:css)

At last, you want to run all of this by running just one command.

最后，您只想运行一个命令即可运行所有这些功能。

• npm-run-all : 📌 package name

  npm-run-all ：📌软件包名称

• compile:sass concat:css prefix:css compress:css : list of commands in order of their sequence for execution.

  compile:sass concat:css prefix:css compress:css ：按命令执行顺序的顺序列出命令。

演示地址

结论(CONCLUSION)

Finally, we’ve set up our build process which means your project is now one command away from being ready for deployment , which is npm-run-all build:css. So, in a nutshell , this process,

最后，我们已经建立了构建过程，这意味着您的项目现在已经远离准备部署的一个命令，即npm-run-all build:css 。 简而言之，这个过程

• Combines all different files of your css in one single file, to minimize the number of HTTP requests you make

  将CSS的所有不同文件合并到一个文件中，以最大程度地减少发出的HTTP请求的数量

• Sets up prefixes for required tags for a wide range of browsers automatically by fetching data from caniuse.com so you don’t have to manually

  通过从caniuse.com获取数据，自动为各种浏览器设置所需标签的前缀，因此您无需手动进行操作

• Makes your final css which is to be used in the browser much compressed, that means faster page loads.

  使要在浏览器中使用的最终css高度压缩，这意味着页面加载速度更快。

P.S: This post is inspired by Jonas Schmedtmann advanced css course you can check it out here — thanks man😊

PS：这篇文章的灵感来自Jonas Schmedtmann 高级CSS课程，您可以在这里查看-谢谢man😊

翻译自: https://medium.com/@kindtheideator/setting-up-a-simple-build-process-in-css-with-npm-scripts-6518ad6541d9

npm构建脚本