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