前端项目工程化 -- 自动化构建初体验

使用sass模块编译scss文件

通常我们在项目中使用sass/scss都可以使用loader来处理，但是如果我只是简单的想用sass做一个静态页面，并不想要更多的配置内容，这时可以这么办：

• 我们需要一个html文件，一个scss文件夹

• 然后初始化package.json

npm init -y

• 安装sass模块

npm install sass --dev

• 使用sass模块编译scss文件

.\node_modules\.bin\sass sass/main.scss css/style.css

• 其中.\node_modules.bin\sass是sass的cmd文件的位置，sass/main.scss是输入的文件路径，css/style.css是编译后输出的文件的路径

• 当然直接输入这些复杂的命令是不合适的，可以在package.json中添加scripts命令

"scripts:{
  "build":"sass scss/main.scss css/style.css"
}

上面这样添加了scripts后，可以直接运行npm run build来编译scss文件

使用browser-sync来启动测试服务器

上面知道怎么编译scss文件了，但是每次更新代码需要手动执行命令，不方便，怎么办？

我们可以使用browser-sync来启动测试服务器，然后动态监听文件变动，就不再需要每次更改代码都去执行命令了，具体操作往下看：

• 安装browser-sync

npm install browser-sync --dev

• 添加scripts

"scripts:{
  "build":"sass scss/main.scss css/style.css --watch",
  "preserve":"npm run build",
  "serve":"browser-sync ."
}

上面的scripts中，首先添加了一个键serve,作用是启动browser-sync,其中的“.”是指的当前项目的根目录
然后添加了键preserve，是一个预启动项，是在每次serve命令执行时，都会优先执行preserve命令来进行build
同时还为build添加了--watch参数，表示动态监听scss文件的改动，只要scss/main.scss文件发生更改，就会自动进行编译

• 运行命令

通过上面的scripts，当我们运行npm run serve时，因为watch，命令行会阻塞并等待文件的更改，这样会导致browser-sync无法直接工作。需要同时执行多个任务的情况，我们可以使用npm-run-all模块

npm install npm-run-all --dev

此时我们的scripts需要更改一下：

"scripts:{
  "build":"sass scss/main.scss css/style.css --watch",
  "serve":"browser-sync .",
  "start":"run-p build serve"
}

上面代码通过start命令来同时执行build和serve命令

此时运行npm run start后，再去更改scss文件的内容，会发现css目录中的style.css文件也再同步变化，但是还有一个问题，就是，虽然css代码同步变化了，但是页面中的显示并没有同步变化，所以还少了点什么，对，我们可以让browser-sync也动态监听文件变动，这样就可以让页面也同步更新了

• 让browser-sync同步文件变动到页面

这一步只需要改动serve命令就可以了：

"scripts:{
  "build":"sass scss/main.scss css/style.css --watch",
  "serve":"browser-sync . --files \"css/*.css\"",
  "start":"run-p build serve"
}

上面代码为serve命令添加了一个参数--files "css/*.css",这样可以监听css目录下的所有以.css结尾的文件的改动，并同步到页面中