- 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”