使用gulp创建一个项目

1. npm init -y //本地安装gulp（全局已经安装过了）
2. npm init -y -g//全局安装gulp
3. 创建 gulpfile.js 文件
4. gulpfile.js : var gulp = require(‘gulp’) //引入gulp
5. npm i gulp-webserver -D //安装服务器
6. 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转换
    //切忌文件之间相互调用，
    //可以多个文件形成链式调用

1. npm i yo3 -D//下载scss封装的包
2. yo:

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

1. app.scss:
   @import “./usage/core/reset”