我已经在我的项目中使用 npm scripts有六个月。在之前,我一直使用 Gulp, Grunt,它们帮了我很多,让我的任务完成得更加高效,也自动帮我处理很多繁琐的任务。 然而,我开始感觉到我好想是在跟工具战斗而不是关乎自己的代码。
Grunt, Gulp, Broccoli,, Brunch 等等工具都要求你的任务符合它们定出的规则,每个工具都要你花时间去了解。并且一旦代码复杂性提高了,你需要花更多精力去处理这些工具。
这些构建工具依靠的插件外面包裹了一层命令行工具,在核心工具外面多了一层抽象,这也意味着可能存在隐患。
下面三个问题我遇到过好多次
- 如果这个工具下没有你想要的插件,那你就太不幸了(除非你自己写一个)
- 你尝试使用的插件包裹着你想用的另一个工具的老版本,那么会导致特性和文档对不上号。
- 错误不是一直都能被很好处理,如果一个插件出错了,它可能不会把错误抛出,这会导致你很痛苦,因为不知道如何 Debug 。
但是,记住
我想说: 如果你对当前使用的构建工具非常满意,并且你要的它都能给你,咁你keep住就嘚啦。只是因为 npm scripts 越来越重要,而不是说你必须跳船。把注意力集中于编写程序而不是用在学习工具。如果你也觉得你是在和工具战斗,那么我建议你尝试使用 npm scripts
如果你真的想开始使用 npm scripts,那么请继续看下去!你会看到很多例子,并且我建好了 npm-build-boilerplate给你作为出发点。开始吧!
编写 npm scripts
我们都花了大把时间在 package.json文件上,我们的依赖和 scripts 都在这,这是我 boilerplate 项目的精简版 package.json
{ "name": "npm-build-boilerplate", "version": "1.0.0", "scripts": { ... }, "devDependencies": { ... }}
我们的 scripts 都会写在 scripts 下面,而devDependencies 下存放的是我们项目的依赖。开始之前,想看看这个项目的结构:
项目结构
SCSS => CSS
我是 SCSS 的狂热爱好者,所以我迫不及待地想跟你介绍。我使用 node-sass来帮我做这项任务,
npm install --save-dev node-sass
使用上面的命令安装好 node-sass, 那么它会出现在你的 package.json 中的 devDependencies里面,这样对于其他想跑你代码的人就方便多了。安装完成之后,我们来使用它:
node-sass --output-style compressed -o dist/css src/scss
这行命令干了这样的事: node-sass 同学 (你是学计算机的吧?) 去把 src/scss下的所有 SCSS 文件都编成 CSS 然后放在 dist/css下面,对了,帮我压缩一下(compressed)
但是大领导通常都懒得说这么长的话,它跟 scripts 说 Just do IT:
"scripts": { "scss": "node-sass --output-style compressed -o dist/css src/scss"}
然后大领导就只需要喊口号即可:
npm run scss
这样,大领导(你)就完成了编译 Sass 的任务(just kidding)。
接下的的部分,任何时候你都可以像上面那样创建 npm scripts
只需要替换把 scss 替换成你的命令即可。
正如你所见,很多命令行工具都需要一大把选项供你选择。比如这里是 node-sass options下面是多个选项的配置:
"scripts": { "scss": "node-sass --output-style nested --indent-type tab --indent-width 4 -o dist/css src/scss"}
Autoprefix CSS with PostCSS
现在我们使用 Autoprefixer & PostCSS 来自动添加前缀,我们可以同时安装多个模块:
npm install --save-dev postcss-cli autoprefixer
我们安装了两个模块,因为 PostCSS 默认什么都不做,他依赖于像Autoprefixer 这类插件。
现在我们都把两个工具添加到 devDependencies 中,在 scripts 对象中再添加一个任务:
"scripts": { ... "autoprefixer": "postcss -u autoprefixer -r dist/css/*"}
这个任务说,postcss 你用 autoprefixer 帮我把 dist/css/*下的所有 css 文件给处理一下,那具体要适应什么浏览器你也要告诉 Autoprefix:
"autoprefixer": "postcss -u autoprefixer --autoprefixer.browsers '> 5%, ie 9' -r dist/css/*"
同样的, postcss-cli, autoprefixer也有很多可选项
Linting JavaScript
保持良好的编程风格和规范是错误最小化和开发效率的保障, Linting帮助我们自动地检查,我们可以使用 eslint
再一次,我们安装 package,这一次使用快捷方式:
npm i -D eslint
同下面的方式一样
npm install --save-dev eslint
安装完,我们使用 eslint 设置一些执行我们代码的基本规则,执行下面代码进入指引:
eslint --init
我建议你选择”Answer questions about your style” 并且回答它问的问题,这会生成一个新的文件在你的项目根部。
再次丰富 scripts 对象:
"scripts": { ... "lint": "eslint src/js"}
这13个字符的命令会查找在 src/js 下的所有js文件,并根据配置重新执行一遍。另外你会被 这些配置逼疯的。
Uglifying JavaScript files
接下来是合并压缩 JavaScript文件,我们选择 uglify-js来做:
npm i -D uglify-js
然后再次配置 package.json :
"scripts": { ... "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js"}
值得一提的是 npm scripts 本质上是命令行的别名,这意味着你可以在 scripts 中使用标准命令行代码,这里用到了 mkdir 和 &&
前半部分, mkdir -p dist/js的意思是如果(-p)不存在这样的目录结构,则创建一个新的执行成功之后(&&) 再执行后半部分 uglifyjs src/js/*.js -m -o dist/js/app.js"这部分是告诉 uglifyjs 使用 “mangle” (-m) 命令,应用在 src/js的所有js 上,并产出到 dist/js/app.js。
让我们再丰富下 uglify , 创建一个 compress 版本的 dist/js/app.js(使用 -c )
"scripts": { ... "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js && uglifyjs src/js/*.js -m -c -o dist/js/app.min.js"}
Compressing Images
接下来看看压缩图片。根据 httparchive.org, 前1000 个热门网站的页面大小是 1.9mb ,而其中图片就占了 1.1mb ,所以页面提速的首要因素是压缩图片体积。
安装 imagemin-cli
npm i -D imagemin-cli
Imagemin 几乎可以压缩所有类型的图片,包括 GIF,JPG,SVG。你可以传递一个文件夹路径,然后它会处理其中的所有图片:
"scripts": { ... "imagemin": "imagemin src/images dist/images -p",}
这个任务是压缩所有在 src/images下的图片,并把结果输出到 dist/images。-p 的意思是 尽量创建 “progressive” 的图片。
SVG Sprites
近几年 SVG 越来越受欢迎,因为它几乎兼容所有设备,可以用 CSS 调整,视觉效果良好。然而很多 SVG 编辑器会残留多余和不必要的代码。我们使用 svgo来移除。
你可以把压缩 SVG 和拼接精灵图放在一块,拼接精灵图我们使用 svg-sprite-generator
npm i -D svgo svg-sprite-generator
现在你应该很熟悉这种模式了吧。
"scripts": { ... "icons": "svgo -f src/images/icons && mkdir -p dist/images && svg-sprite-generate -d src/images/icons -o dist/images/icons.svg"}
icons 这个任务做了三件事,传递了一个文件夹路径(-f)给 svgo, 然后如果没有(-p) dist/images这个文件夹则创建一个,接着就拼接精灵图,结果保存到(-d) src/images/icons, 产出(-o)叫做 dist/images/icons.svg
Serve and Automatically Inject Changes with BrowserSync
最后一个问题是 BrowserSync,他可以帮我们做的是:开启一个本地服务器,自动更新文件,自动在浏览器中同步点击,滚动效果。
npm i -D browser-sync
"scripts": { ... "serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'"}
这个任务打开一个本地服务(—server),以当前路径作为根目录,—files 参数告诉 Browsersync 监听 dist下的所有css 和 js文件,一有更新,马上自动刷新页面。
Grouping tasks
有了上面的代码,我们现在能够:
- 编译 SCSS 并且自动添加前缀
- 检查并压缩 JavaScript
- 压缩图片
- 将一个 SVG 文件夹转成一张 SVG 精灵图
- 创建一个本地服务器,并实时自动刷新浏览器
Combining CSS tasks
我们可以把 CSS 相关的任务合并在一起:
"scripts": { ... "build:css": "npm run scss && npm run autoprefixer"}
当你执行 npm run build:css ,它会在执行 scss 任务成功之后在执行 autoprefixer 。其他任务也类似,我们也可以这样做
"scripts": { ... "build:js": "npm run lint && npm run uglify", "build:images": "npm run imagemin && npm run icons", "build:all": "npm run build:css && npm run build:js && npm run build:images"}
Watching for changes
我们现在还需要监听文件的变动,并自动执行相应的任务,我推荐使用 onchange,安装:
npm i -D onchange
添加任务:
"scripts": { ... "watch:css": "onchange 'src/scss/*.scss' -- npm run build:css", "watch:js": "onchange 'src/js/*.js' -- npm run build:js",}
任务是给 onchange 传递一个需要监听的文件路径,我们需要 onchange 自动执行的命令则放在 — 后面。
Let’s add one more watch command to finish off our npm scripts build process.
安装多一个 package, parallelshell
npm i -D parallelshell
再一次,添加新的任务到 scripts 对象上:
"scripts": { ... "watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"}
parallelshell 允许我们同时执行多个任务,为什么不使用 && 呢?
因为 && 的执行顺序必须是前面的执行完了才轮到后面的任务,但是 watch 类型的任务永远不会完成啊~
现在 watch:all 任务开启服务器,并监听代码,一旦有变动,马上刷新浏览器 perfect!
Other useful tasks
npm 有很多 其他任务。我们再写一个总的启动任务:
"scripts": { ... "postinstall": "npm run watch:all"}
npm install 之后就执行一下 postinstall 吧,这在团队开发中是很好的体验,克隆你代码的人执行 npm install 然后 马上 watch: all
Wrap Up
噢,我们做到了(终于翻译完了,好长的文章。。。),希望看完这篇文章你能学会使用 npm scripts
对了,我把代码都放在 npm-build-boilerplate上了,欢迎交流。
译者的废话
最近看到关于 npm scripts 的字眼比较多,然后就找了篇文章翻译。
- 使用gulp生成sprites图片和样式表
- Gulp新手入门教程
- 我为何放弃Gulp与Grunt,转投npm scripts(上)

강력한 기능과 우수한 사용자 경험을 가진 웹 사이트를 구축하기 위해서는 HTML만으로는 충분하지 않습니다. 다음 기술도 필요합니다. JavaScript는 웹 페이지 동적 및 상호 작용을 제공하며 DOM을 운영하여 실시간 변경을 달성합니다. CSS는 미학 및 사용자 경험을 향상시키기 위해 웹 페이지의 스타일과 레이아웃을 담당합니다. React, Vue.js 및 Angular와 같은 현대 프레임 워크 및 라이브러리는 개발 효율성 및 코드 조직 구조를 향상시킵니다.

부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.

HTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.

HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.

HTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
