84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
现在一些项目,除了提供源文件,还提供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 文件中这样引入文件:
实际上,上面那样引用,并不方便。一般是使用 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 里这样引用:
js 也是类似。
Grunt 与 Gulp 在处理上,有些类似。Webpack 更加智能,你可以看一下相关的文档。
直接在html里引入normalize.css就好了,像这样:
html
normalize.css
前提是你的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文件