现在一些项目,除了提供源文件,还提供node.js安装模块的方式。我的机器已安装有node和git,我通过如图所示安装了normalize.css模块,那么我该如何使用呢?
比如我有个css文件,我要植入normalize.css进行样式初始化,该怎么做。对node和npm不太理解,求指点。
在git中,使用npm命令可以看到normalize.css已经安装
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
如果你想使用 npm 来进行包管理,那意味首:
使用 package.json 来进行项目的包或依赖管理
package.json
使用专门的管理工具,来管理或打包对应的 js / css 文件
如果你是个小型项目,而且不是专门的前端或 Node 项目,并不适合使用 npm 来进行管理,如果你有大量的依赖,而且本来就是前端项目,那就考虑开始使用 npm 来进行包或依赖管理。
在项目中加入第三方包的时候,使用如下的命令来进行安装:
npm i --save normalize.css
这样便将依赖加入到了 package.json 。对应的文件,下载在 node_modules 文件夹中。
node_modules
在开发过程中,你可以将 node_modules 文件夹整体放在 Web 服务器的目录内,这样,便可以在 html 文件中这样引入文件:
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css"> <script src="node_modules/moment/moment.js"></script>
实际上,上面那样引用,并不方便。一般是使用 Gulp / Grunt / Webpack 一类的工具,管理和打包 js / css 文件。具体你可以查一下这三个相关的资料。
比如,使用 Gulp 可以这样来打包压缩 css 文件,如下:
var gulp = require('gulp'); var concat = require('gulp-concat'); var cssmin = require('gulp-cssmin'); var cssFiles = [ 'node_modules/bootstrap/dist/css/bootstrap.css', 'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css', // ... ... ]; gulp.task('stylesheet_min', function(){ gulp .src(cssFiles) .pipe(concat('all.min.css')) .pipe(cssmin()) .pipe(gulp.dest( path.join(BUILD_FLODER, 'css') )) });
上面的代码,是将多个 css 合并为一个 css 文件,并将它移动到指定的目录,这样,你便可以在 html 里这样引用:
<link rel="stylesheet" href="css/all.css">
js 也是类似。
Grunt 与 Gulp 在处理上,有些类似。Webpack 更加智能,你可以看一下相关的文档。
直接在html里引入normalize.css就好了,像这样:
html
normalize.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" charset="utf-8"> </head> <body> </body> </html>
前提是你的npm install --save normalize.css命令要在你的项目目录里运行
npm install --save normalize.css
如果使用webpack打包,可以在js文件中写
require("normalize.css") // 或者es6的写法 import "normalize.css"
来引入css文件
如果你想使用 npm 来进行包管理,那意味首:
使用
package.json
来进行项目的包或依赖管理使用专门的管理工具,来管理或打包对应的 js / css 文件
如果你是个小型项目,而且不是专门的前端或 Node 项目,并不适合使用 npm 来进行管理,如果你有大量的依赖,而且本来就是前端项目,那就考虑开始使用 npm 来进行包或依赖管理。
使用 package.json 来进行包或依赖管理
在项目中加入第三方包的时候,使用如下的命令来进行安装:
这样便将依赖加入到了 package.json 。对应的文件,下载在
node_modules
文件夹中。在项目中使用 js / css 文件
在开发过程中,你可以将
node_modules
文件夹整体放在 Web 服务器的目录内,这样,便可以在 html 文件中这样引入文件:js / css 文件的管理和打包
实际上,上面那样引用,并不方便。一般是使用 Gulp / Grunt / Webpack 一类的工具,管理和打包 js / css 文件。具体你可以查一下这三个相关的资料。
比如,使用 Gulp 可以这样来打包压缩 css 文件,如下:
上面的代码,是将多个 css 合并为一个 css 文件,并将它移动到指定的目录,这样,你便可以在 html 里这样引用:
js 也是类似。
Grunt 与 Gulp 在处理上,有些类似。Webpack 更加智能,你可以看一下相关的文档。
直接在
html
里引入normalize.css
就好了,像这样:如果使用webpack打包,可以在js文件中写
来引入css文件