深圳Web前端学习：npm + gulp + scss + 项目架构

深圳Web前端学习：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 --global ------ 全局安装
//简写为 npm i -g — 一定要小写
npm install ------ 临时安装
// 简写为 npm i
npm install --save ------ 项目依赖
// 简写为 npm i -S — 一定要大写
npm install --save-dev ------ 开发依赖
// 简写为 npm i -D — 一定要大写
升级模块、更新模块
Npm install @version --global ------ 全局安装
//简写为 npm i @version -g — 一定要小写
npm install @version------ 临时安装
// 简写为 npm i @version
npm install @version --save ------ 项目依赖
// 简写为 npm i@version -S — 一定要大写
npm install @version --save-dev ------ 开发依赖
// 简写为 npm i @version -D — 一定要大写
删除模块
npm uninstall -g
npm uninstall -S
npm uninstall -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验证
order.html ------- 订单页面 ----- 地址的填写、支付方式选择、确认表单
pay.html ------- 支付页面 ----- 假的二维码，支付按钮，模态框输金额，点支付
register.html ------- 注册页面 ----- 必须表单验证，后天可用php验证
usercenter.html ------- 个人中心 ----- 修改密码，地址管理，订单管理
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文件夹下编辑任何文件

在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

这里是页面

则会发现在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来构建一个项目，希望对大家有所帮助。