npm + gulp + scss + 项目架构
Posted 专注交流一百年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了npm + gulp + scss + 项目架构相关的知识，希望对你有一定的参考价值。
在此声明，每部分红色标注为文件的变化，并且都带有关键性的注释语句。希望能给大家带来帮助。
一、npm讲解
https://www.npmjs.com.cn/
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于nodejs已经集成了npm，所以npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。
node -v
npm -v
由于npm的服务器在国外，国内为了保证访问速度，我们可以访问淘宝镜像，以后就可以通过cnpm代替npm指令了
http://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装模块
npm install <Module Name> --global ------ 全局安装
//简写为 npm i <Module Name> -g --- 一定要小写
npm install <Module Name> ------ 临时安装
// 简写为 npm i <Module Name>
npm install <Module Name> --save ------ 项目依赖
// 简写为 npm i<Module Name> -S --- 一定要大写
npm install <Module Name> --save-dev ------ 开发依赖
// 简写为 npm i <Module Name> -D --- 一定要大写
升级模块、更新模块
npm install <Module Name>@version --global ------ 全局安装
//简写为 npm i <Module Name>@version -g --- 一定要小写
npm install <Module Name>@version------ 临时安装
// 简写为 npm i <Module Name>@version
npm install <Module Name>@version --save ------ 项目依赖
// 简写为 npm i<Module Name>@version -S --- 一定要大写
npm install <Module Name>@version --save-dev ------ 开发依赖
// 简写为 npm i <Module Name>@version -D --- 一定要大写
删除模块
npm uninstall <Module Name> -g
npm uninstall <Module Name> -S
npm uninstall <Module Name> -D
二、gulp
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
全局安装gulp
cnpm i gulp -g
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装，目前最新版本为3.9.1
gulp -v
在项目目录处按住shift，点击鼠标右键，选择打开命令行，通过cnpm init创建package.json文件,一直敲回车即可
cnpm init
// 以下为输出内容
name: (gulp-lesson)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\course-wxx\sz1805\lesson2\gulp-lesson\package.json:
{
"name": "gulp-lesson",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
打开package.json文件，可以看到如下内容
{
"name": "gulp-lesson", // 项目名称
"version": "1.0.0", // 项目版本号
"description": "", // 项目描述
"main": "index.js", // 默认入口文件
"scripts": { // 测试命令，可以通过npm run test运行后续的指令，可以配置，后续会讲解
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", // 作者
"license": "ISC" // 模块制定协议，让用户知道他们有何权限来使用你的模块，以及使用该模块有哪些限制
}
三、在该项目目录下创建一个js文件，gulpfile.js
四、安装基础模块
cnpm i gulp -S
此时会发现项目文件夹中package.json内容发生了改变
{
"name": "gulp-lesson",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": { // 开发依赖
"gulp": "^3.9.1"
}
}
五、配置项目基本目录结构
|-gulp-lesson
|-assets ------- 静态资源文件
|-css ------- 第三方css文件
|-images ------- 项目图片文件
|-js ------- 第三方js文件
|-js ------- 自己的js文件
|-lib ------- scss框架文件
base.scss ------- 全局base定义，可以使用在任何地方
classes.scss ------- scss函数的定义
function.scss ------- 自定义全局函数
reset.scss ------ 重置mobile及高级浏览器上常见的异常
variables.scss ------ 全局variables，基础变量map
|-node_modules ------- 模块依赖文件
|-scss ------- 自己的scss文件
|-views ------- 项目结构文件
cart.html ------- 购物车页面 ----- 全选、反选、选择计算总价、总数量，数量加减
category.html ------- 分类页面 ----- 各种排序筛选
detail.html ------- 详情页面 ----- 吸顶效果、放大效果、详情介绍，加购物画车
index.html ------- 首页 ----- 菜单，楼梯效果，轮播图
login.html ------- 登录页面 ----- 必须表单验证，后天可用php验证
pay.html ------- 支付页面 ----- 假的二维码，支付按钮，模态框输金额，点支付
register.html ------- 注册页面 ----- 必须表单验证，后天可用php验证
gulpfile.json ------- gulp项目配置文件
package.json ------- 项目基础配置文件
六、编写gulpfile.js文件，实现将views，assets文件复制到dist文件夹下，注意dist文件我们并未创建
var gulp = require('gulp')
gulp.task('copy-views', function () {
gulp.src('views/**/*') // 选中views文件夹下的所有文件包括子文件中的
.pipe( // 管道思想，上一级的输出作为下一级的输入
gulp.dest('dist/views') // 将上诉命令的结果放置dist文件夹中，没有dist文件夹会自动创建
)
})
gulp.task('copy-assets', function () {
gulp.src('assets/**/*') // 选中views文件夹下的所有文件包括子文件中的
.pipe( // 管道思想，上一级的输出作为下一级的输入
gulp.dest('dist/assets') // 将上诉命令的结果放置dist文件夹中，没有dist文件夹会自动创建
)
})
此时在该项目目录下运行如下命令
gulp copy-views
[23:02:51] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:02:51] Starting 'copy-views'...
[23:02:51] Finished 'copy-views' after 5.82 ms
gulp copy-assets
[23:03:20] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:03:20] Starting 'copy-assets'...
[23:03:20] Finished 'copy-assets' after 5.7 ms
我们就会发现在项目下出现了一个dist的文件夹，下面有两个文件夹，分别为assets和views,结构如下：
|-dist
|-assets
|-css
|-images
|-js
|-views
cart.html
category.html
detail.html
index.html
login.html
order.html
pay.html
register.html
usercenter.html
那么我们能不能一次性执行完上面的两个指令呢？
答案必然是可以的
我们可以修改gulpfile.js文件如下
var gulp = require('gulp')
gulp.task('copy-views', function () {
gulp.src('views/**/*')
.pipe(
gulp.dest('dist/views')
)
})
gulp.task('copy-assets', function () {
gulp.src('assets/**/*')
.pipe(
gulp.dest('dist/assets')
)
})
//build是gulp中自带的，是默认的，你不需要更改名字
gulp.task('build', ['copy-views', 'copy-assets'], function () {
console.log('ok')
})
然后只需要执行以下命令即可，可以先删除dist文件夹然后再试查看效果,
gulp build
[23:18:28] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:18:28] Starting 'copy-views'...
[23:18:28] Finished 'copy-views' after 5.76 ms
[23:18:28] Starting 'copy-assets'...
[23:18:28] Finished 'copy-assets' after 712 μs
[23:18:28] Starting 'build'...
ok
[23:18:28] Finished 'build' after 100 μs
我们发现dist文件夹又神奇的出现了
接下来我们接入css预处理方式之sass/scss，这样我们就可以使用scss来编写css了
七、sass/scss模块使用
cnpm i node-sass gulp-sass -S
打开index.html文件，编写如下代码，注意我们不在dist文件夹下编辑任何文件
<body>
<div class="container"></div>
</body>
在scss文件夹下创建common.scss文件，作为项目的通用样式文件，写入如下代码
@import './../lib/reset.scss';
.container {
@include rect(90%, 1000px);
@include margin(0 auto);
@include background-color(#eee);
}
安装压缩css模块和更改名字模块
cnpm i gulp-clean-css gulp-rename -S
现在编辑gulpfile.js文件，并且添加scss任务到默认列表组中
var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
gulp.task('copy-views', function () {
gulp.src('views/**/*')
.pipe(
gulp.dest('dist/views')
)
})
gulp.task('copy-assets', function () {
gulp.src('assets/**/*')
.pipe(
gulp.dest('dist/assets')
)
})
gulp.task('scss', function () {
gulp.src('scss/**/*.scss') // 找到scss文件夹下的所有的scss文件
.pipe(sass().on('error',sass.logError)) // 会将scss文件处理为css文件
.pipe(rename((path) => { // 将css后缀名改为css文件
path.extname = '.css'
}))
.pipe(gulp.dest('dist/css')) // 将css文件放在dist目录下
.pipe(cleanCss()) // 将css文件下的css文件进行压缩处理
.pipe(rename((path) => { // 将dist/css后缀名改为**.min.css文件
path.extname = '.min.css'
}))
.pipe(gulp.dest('dist/css')) // 将**.min.css问价放在dist文件中
})
gulp.task('build', ['copy-views', 'copy-assets','scss'], function () {
console.log('ok')
})
此时执行如下命令，则可看到dist文件中出现了变化
gulp build
[23:41:52] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[23:41:52] Starting 'copy-views'...
[23:41:52] Finished 'copy-views' after 5.25 ms
[23:41:52] Starting 'copy-assets'...
[23:41:52] Finished 'copy-assets' after 574 μs
[23:41:52] Starting 'scss'...
[23:41:52] Finished 'scss' after 3.08 ms
[23:41:52] Starting 'build'...
ok
[23:41:52] Finished 'build' after 84 μs
|-dist
|-assets
|-css
common.css // 未压缩的css代码-----含注释语句
common.min.css // 压缩过的css代码-----不含注释语句
|-views
如果我们做的是PC端的页面，也许我们得注意一下，在lib/base.scss文件中第14行代码必须得是normal，如果在移动端需要根据屏幕宽度变化而实时变化的时候，我们可以更改为scaling
14 | responsive-type: normal ------ 宽高确定不会变，如果为scaling高度会随着宽度变化而变化
如果我们的文件内容发生改变后（修改完一个文件），我们不可能实时运行gulp build重新构建出一个新的版本，所以我们需要监听文件的变化从而让它自动更新。
八、监听文件的变化
不仅监听文件变化，并且执行命令只想写gulp命令，需要配置默认任务default
修改gulpfile.js文件如下
var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
gulp.task('copy-views', function () {
gulp.src('views/**/*')
.pipe(
gulp.dest('dist/views')
)
})
gulp.task('copy-assets', function () {
gulp.src('assets/**/*')
.pipe(
gulp.dest('dist/assets')
)
})
gulp.task('scss', function () {
gulp.src('scss/**/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(rename((path) => {
path.extname = '.css'
}))
.pipe(gulp.dest('dist/css'))
.pipe(cleanCss())
.pipe(rename((path) => {
path.extname = '.min.css'
}))
.pipe(gulp.dest('dist/css'))
})
gulp.task('watch', function () {
gulp.watch('views/**/*', ['copy-views']) //如果监听到views文件夹内有内容发生变化，触发copy-views任务
gulp.watch('assets/**/*', ['copy-assets']) //如果监听到assets文件夹内有内容发生变化，触发copy- assets任务
gulp.watch('scss/**/*.scss', ['scss']) //如果监听到scss文件夹内有内容发生变化，触发scss任务
})
gulp.task('build', ['copy-views', 'copy-assets','scss'], function () {
console.log('ok')
})
gulp.task('default', ['build', 'watch']); //默认执行build任务和watch任务
此时执行gulp指令即可，会自动执行监听任务
gulp
[23:56:23] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js[23:56:23] Starting 'copy-views'...
[23:56:23] Finished 'copy-views' after 5.57 ms
[23:56:23] Starting 'copy-assets'...
[23:56:23] Finished 'copy-assets' after 633 μs
[23:56:23] Starting 'scss'...
[23:56:23] Finished 'scss' after 4.2 ms
[23:56:23] Starting 'build'...
ok
[23:56:23] Finished 'build' after 94 μs
[23:56:23] Starting 'watch'...
[23:56:23] Finished 'watch' after 19 ms
[23:56:23] Starting 'default'...
[23:56:23] Finished 'default' after 44 μs
- // 闪动表示继续监听任务的变化
随意修改文件内部内容（添加文件，修改文件）即可发现dist文件夹中相对应的都发生了改变，比如我们修改了views文件夹下的index.html
<div class="container">这里是页面</div>
则会发现在dist/views/index.html的内容也发生了改变
上面我们进行了样式，布局的改变，接下来我们设置一下js的改变
九、js文件的改变以及压缩
安装压缩js的模块
cnpm i gulp-uglify -S
在js文件夹创建 一个公共js文件common.js,编写如下内容
alert('千锋吴大勋')
alert('帅，很帅，非常帅')
修改gulpfile.js文件如下
var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
gulp.task('copy-views', function () {
gulp.src('views/**/*')
.pipe(
gulp.dest('dist/views')
)
})
gulp.task('copy-assets', function () {
gulp.src('assets/**/*')
.pipe(
gulp.dest('dist/assets')
)
})
gulp.task('scss', function () {
gulp.src('scss/**/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(rename((path) => {
path.extname = '.css'
}))
.pipe(gulp.dest('dist/css'))
.pipe(cleanCss())
.pipe(rename((path) => {
path.extname = '.min.css'
}))
.pipe(gulp.dest('dist/css'))
})
gulp.task('js', function () {
gulp.src('js/**/*.js') // 找到js文件夹下的所有的js文件
.pipe(rename((path) => { // 更改js文件夹下的所有的js文件名字
path.extname = '.js'
}))
.pipe( // 放到dist/js中
gulp.dest('dist/js')
)
.pipe(uglify()) // 压缩js代码
.pipe(rename((path) => { // 更改dist/js文件夹下的所有的js文件名字为*.min.js
path.extname = '.min.js'
}))
.pipe( // 放到dist/js中
gulp.dest('dist/js')
)
})
gulp.task('watch', function () {
gulp.watch('views/**/*', ['copy-views'])
gulp.watch('assets/**/*', ['copy-assets'])
gulp.watch('scss/**/*.scss', ['scss'])
gulp.watch('js/**/*.js', ['js'])
})
gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js'], function () {
console.log('ok')
})
gulp.task('default', ['build', 'watch']);
然后运行gulp指令，随意修改assets、views、js、scss文件夹下的内容，均可发现dist文件中的内容发生了改变
上面的一些操作主要是文件的复制与内容的替换，我们要想查看实时效果的话还得需要引入服务器
十、服务器的架设
安装模块gulp-connect
cnpm i gulp-connect -S
一定要记住每次修改完文件也要重新启动服务器，
具体修改文件gulpfile.js配置如下
var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var connect = require('gulp-connect')
gulp.task('copy-views', function () {
gulp.src('views/**/*')
.pipe(
gulp.dest('dist/views')
)
.pipe(connect.reload()) // 重新启动服务器
})
gulp.task('copy-assets', function () {
gulp.src('assets/**/*')
.pipe(
gulp.dest('dist/assets')
)
.pipe(connect.reload()) // 重新启动服务器
})
gulp.task('scss', function () {
gulp.src('scss/**/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(rename((path) => {
path.extname = '.css'
}))
.pipe(gulp.dest('dist/css'))
.pipe(cleanCss())
.pipe(rename((path) => {
path.extname = '.min.css'
}))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload()) // 重新启动服务器
})
gulp.task('js', function () {
gulp.src('js/**/*.js')
.pipe(rename((path) => {
path.extname = '.js'
}))
.pipe(
gulp.dest('dist/js')
)
.pipe(uglify())
.pipe(rename((path) => {
path.extname = '.min.js'
}))
.pipe(
gulp.dest('dist/js')
)
.pipe(connect.reload()) // 重新启动服务器
})
gulp.task('watch', function () {
gulp.watch('views/**/*', ['copy-views'])
gulp.watch('assets/**/*', ['copy-assets'])
gulp.watch('scss/**/*.scss', ['scss'])
gulp.watch('js/**/*.js', ['js'])
})
gulp.task('server', function () { // 默认服务任务server
connect.server({
root: 'dist/views', //启动目录
livereload: true //实时更新数据，需要调用connect.reload()
})
})
gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js'], function () {
console.log('ok')
})
gulp.task('default', ['build', 'watch', 'server']);
我们都知道，项目中有一个版块最耗费资源，那就是图片，所以我们需要对图片进行压缩
十一、压缩图片
安装模块 gulp-imagemin
cnpm i gulp-imagemin -S
修改gulpfile.js文件如下
var gulp = require('gulp')
var sass = require('gulp-sass')
var cleanCss = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var connect = require('gulp-connect')
var imageMin = require('gulp-imagemin');
gulp.task('copy-views', function () {
gulp.src('views/**/*')
.pipe(
gulp.dest('dist/views')
)
.pipe(connect.reload())
})
gulp.task('copy-assets', function () {
gulp.src('assets/**/*')
.pipe(
gulp.dest('dist/assets')
)
.pipe(connect.reload())
})
gulp.task('scss', function () {
gulp.src('scss/**/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(rename((path) => {
path.extname = '.css'
}))
.pipe(gulp.dest('dist/css'))
.pipe(cleanCss())
.pipe(rename((path) => {
path.extname = '.min.css'
}))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload())
})
gulp.task('js', function () {
gulp.src('js/**/*.js')
.pipe(rename((path) => {
path.extname = '.js'
}))
.pipe(
gulp.dest('dist/js')
)
.pipe(uglify())
.pipe(rename((path) => {
path.extname = '.min.js'
}))
.pipe(
gulp.dest('dist/js')
)
.pipe(connect.reload())
})
gulp.task('image',function(){
gulp.src('assets/images/**/*')
.pipe(imageMin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('dist/assets/images'))
})
gulp.task('watch', function () {
gulp.watch('views/**/*', ['copy-views'])
gulp.watch('assets/**/*', ['copy-assets'])
gulp.watch('scss/**/*.scss', ['scss'])
gulp.watch('js/**/*.js', ['js'])
gulp.watch('assets/images/**/*', ['image'])
})
gulp.task('server', function () {
connect.server({
root: 'dist/views',
livereload: true
})
})
gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js','image'], function () {
console.log('ok')
})
gulp.task('default', ['build', 'watch', 'server']);
可以添加一张图片，执行指令gulp
gulp
[00:38:31] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js
[00:38:31] Starting 'copy-views'...
[00:38:31] Finished 'copy-views' after 5.63 ms
[00:38:31] Starting 'copy-assets'...
[00:38:31] Finished 'copy-assets' after 773 μs
[00:38:31] Starting 'scss'...
[00:38:31] Finished 'scss' after 2.94 ms
[00:38:31] Starting 'js'...
[00:38:31] Finished 'js' after 1.06 ms
[00:38:31] Starting 'image'...
[00:38:31] Finished 'image' after 1.23 ms
[00:38:31] Starting 'build'...
ok
[00:38:31] Finished 'build' after 317 μs
[00:38:31] Starting 'watch'...
[00:38:31] Finished 'watch' after 22 ms
[00:38:31] Starting 'server'...
[00:38:31] Starting server...
[00:38:31] Finished 'server' after 4.29 ms
[00:38:31] Starting 'default'...
[00:38:31] Finished 'default' after 30 μs
[00:38:31] Server started http://localhost:8080
[00:38:31] LiveReload started on port 35729
[00:38:31] Running server
[00:38:32] gulp-imagemin: Minified 1 image (saved 3.7 kB - 9.7%)
至此我们已经把项目中需要的东西搞的差不多了，现在唯一不足的一点就是，我们前端中要尽量的减少http请求数，我们写完项目的时候会有好多的css文件，好多的js文件，我们有必要合并一下
十二、合并文件
安装模块gulp-concat
cnpm i gulp-concat -S
此处必须说明的是，大家在合并的时候一定要注意一下合并文件的顺序，否则会出现顺序错乱的情况，此处不做说明，只写简要代码，大家可以根据需求实现此功能
简易代码如下
var concat = require('gulp-concat')
gulp.task('contactcss', function () {
gulp.src(['1.css', '2.css', '3.css', '!4.css']) // 合并1,2,3.css,不包括4.css
.pipe(concat('app.css'))
.pipe(gulp.dest('dist/css'))
})
gulp.task('contactjs', function () {
gulp.src(['1.js', '2.js', '3.js', '!4.js']) // 合并1,2,3.js,不包括4.js
.pipe(concat('app.js'))
.pipe(gulp.dest('dist/js'))
})
总结，本章节中我们学习了如何使用gulp来构建一个项目，希望对大家有所帮助，如果你有任何的问题，欢迎和大勋联系。
以上是关于npm + gulp + scss + 项目架构的主要内容，如果未能解决你的问题，请参考以下文章