Acollectionofpackagesthatbuildawebsiteusingnpmscripts.
ListofpackagesusedUsinginyourprojectListofavailabletasksNeedhelp?Listofpackagesusedautoprefixer,browser-sync,eslint,imagemin-cli,node-sass,onchange,npm-run-all,postcss-cli,svgo,svg-sprite-generator,uglify-js.
Many,manythanksgoouttoKeithCirkelforhispostandhisusefulCLItools!
UsinginyourprojectFirst,ensurethatnode.js&npmarebothinstalled.Ifnot,chooseyourOSandinstallationmethodfromthispageandfollowtheinstructions.Next,useyourcommandlinetoenteryourprojectdirectory.Ifthisanewproject(withoutapackage.jsonfile),startbyrunningnpminit.Thiswillaskafewquestionsanduseyourresponsestobuildabasicpackage.jsonfile.Next,copythe"devDependencies"objectintoyourpackage.json.Ifthisisanexistingproject,copythecontentsof"devDependencies"intoyourpackage.json.Now,copyanytasksyouwantfromthe"scripts"objectintoyourpackage.json"scripts"object.Finally,runnpminstalltoinstallallofthedependenciesintoyourproject.You'rereadytogo!Runanytaskbytypingnpmruntask(where"task"isthenameofthetaskinthe"scripts"object).Themostusefultaskforrapiddevelopmentiswatch.Itwillstartanewserver,openupabrowserandwatchforanySCSSorJSchangesinthesrcdirectory;onceitcompilesthosechanges,thebrowserwillautomaticallyinjectthechangedfile(s)!
Listofavailabletaskscleanrm-fdist/{css/*,js/*,images/*}
Deleteexistingdistfiles
autoprefixerpostcss-uautoprefixer-rdist/css/*
AddvendorprefixestoyourCSSautomatically
scssnode-sass--output-stylecompressed-odist/csssrc/scss
CompileScsstoCSS
linteslintsrc/js
"Lint"yourJavaScripttoenforceauniformstyleandfinderrors
uglifymkdir-pdist/js&&uglifyjssrc/js/*.js-m-odist/js/app.js&&uglifyjssrc/js/*.js-m-c-odist/js/app.min.js
Uglify(minify)aproductionreadybundleofJavaScript
imageminimageminsrc/images/*-odist/images
Compressalltypesofimages
iconssvgo-fsrc/images/icons&&mkdir-pdist/images&&svg-sprite-generate-dsrc/images/icons-odist/images/icons.svg
CompressseparateSVGfilesandcombinethemintooneSVG"sprite"
servebrowser-syncstart--server--files'dist/css/*.css,dist/js/*.js,**/*.html,!node_modules/**/*.html'
StartanewserverandwatchforCSS&JSfilechangesinthedistfolder
build:cssrun-sscssautoprefixer
Aliastorunthescssandautoprefixertasks.CompilesScsstoCSS&addvendorprefixes
build:jsrun-slintconcatuglify
Aliastorunthelint,concatanduglifytasks.LintsJS,combinessrcJSfiles&uglifiestheoutput
build:imagesrun-simageminicons
Aliastoruntheimageminandiconstasks.Compressesimages,generatesanSVGspritefromafolderofseparateSVGs
buildrun-sbuild:*
Aliastorunallofthebuildcommands
watch:cssonchange'src/**/*.scss'--run-sbuild:css
Watchesforany.scssfileinsrctochange,thenrunsthebuild:csstask
watch:jsonchange'src/**/*.js'--run-sbuild:js
Watchesforany.jsfileinsrctochange,thenrunsthebuild:jstask
watch:imagesonchange'src/images/**/*'--run-sbuild:images
Watchesforanyimagesinsrctochange,thenrunsthebuild:imagestask
watchrun-pservewatch:*
Runthefollowingtaskssimultaneously:serve,watch:css,watch:js&watch:images.Whena.scssor.jsfilechangesinsrcoranimagechangesinsrc/images,thetaskwillcompilethechangestodist,andtheserverwillbenotifiedofthechange.Anybrowserconnectedtotheserverwilltheninjectthenewfilefromdist
postinstallrun-sbuildwatch
Runswatchafternpminstallisfinished
Needhelp?Feelfreetocreateanissue,tweetme,orsendmeanemail.I'dbegladtohelpwhereIcan!
评论