使用gulp创建一个项目

npm init -y //本地安装gulp（全局已经安装过了）

npm init -y -g//全局安装gulp

创建 gulpfile.js 文件

gulpfile.js : var gulp = require(‘gulp’) //引入gulp

npm i gulp-webserver -D //安装服务器

var webserver = require('gulp-webserver');

//启动 webserver      webserver是个任务名
gulp.task('webserver',function(){
gulp.src('./dev')               //这个位置所配置的地址就是从 localhost:4000打开后所显示的文件位置
.pipe(webserver({
host: 'localhost',
port: 4000,
directoryListing: {
enable: true,
path: './dev'       //同上
},
livereload: true
}))
})

8.创建index.html（手机版）

9. 创建源文件夹 src

10. src下创建app.scss

11. 创建dev文件夹用来发布用

12. npm i gulp-sass node-sass -D //安装sass包

13.

var sass = require('gulp-sass')

//向gulpfile中添加

14.

// 编译scss
gulp.task('packscss', function () {
gulp.src('./src/styles/app.scss')//原scss文件所在目录
.pipe(sass().on('error', sass.logError))//报错信息
.pipe(gulp.dest('./dev/styles'))//编译后生成的css文件所存放的目录
console.log("packscss.");
}).

15.

//用来拷贝HTML文件
gulp.task('copyhtml', function () {
gulp.src('./src/*.html')      //所要监听的文件目录
.pipe(gulp.dest('./dev/'))  //拷贝到的文件目录
console.log("copyhtml.");
})

16.拆分scss文件：

reset.scss, section.scss, header.scss, footer.scss

将以上文件组合到app.css文件中

app.scss:

@import "./reset.scss";
@import "./section.scss";
@import "./header.scss";
@import "./footer.scss";

17 .npm i gulp-webpack -D //安装gulp-webpack包

18.

var webpack = require('gulp-webpack')

19. npm i imports-loader -D //安装支持webpack的包

19.1 npm i vinyl-named -D

19.2 var named = require(‘vinyl-named’) //用来取文件名，和loader一起用

20.

// 引入gulp-webpack, 实现CommonJS 模块化开发
gulp.task('packjs', function () {
gulp.src('./src/scripts/app.js')
.pipe(named())
.pipe(webpack({
output: {                 //输出
filename: '[name].js'       //所输出的文件名
},
module: {                 //使用loader将使用后台语句的js文件编译成浏览器能运行的语句
loaders: [
{
test: /\.js$/,
loader: 'imports-loader',   //所使用的loader
exclude: './node_modules'   //将node_modules中的js文件排除在外
}
]
}
}))
.pipe(gulp.dest('./dev/scripts'))   //将编译后生成的js文件存放的位置
console.log("packjs.");
})

21.拆分js文件

定义模块--->暴露接口---> 引用 --->调用
app.js ,   name.js
每一个js文件就是一个定义的模块
nane.js:
......
module.exports = someThing//用来暴露接口
app.js:
var st = require('name.js的路径');//引用name.js
//require语句浏览器不支持，所以需要用webpack转换
//切忌文件之间相互调用，
//可以多个文件形成链式调用

npm i yo3 -D//下载scss封装的包

yo:

会在根目录下生成一个yo文件，不要可以删
从node_moduls取出style，为了和gulpfile中配置的文件名相同，将style改名为 styles
将app.scss放在styles下
给app.scss链接./usage/core/reset，reset文件，用来配置通用内容

app.scss:

@import “./usage/core/reset”