gulp——用自动化构建工具增强你的工作流程

摘要：概念之前有写了，现在重新写感觉二者最终结果虽说相差无几，但是侧重点还是有所不同更偏向于工程化，侧重于项目的整个流程控制，你可以二者结合，也可以分开取舍都有利于前端项目的工程化构建安装全局安装作为项目的开发依赖安装在项目根目录下创建一

之前有写了webpack， 现在重新写gulp感觉二者最终结果虽说相差无几，但是侧重点还是有所不同
webpack更偏向于工程化，gulp侧重于项目的整个流程控制，你可以二者结合，也可以分开取舍 都有利于前端项目的工程化构建

安装
1、全局安装

  $ npm install -g gulp 

2、作为项目的开发依赖（devDependencies）安装：

  $ npm install --save-dev gulp

3、 在项目根目录下创建一个名为 gulpfile.js 的文件：

   var gulp = require("gulp");
   gulp.task("default", function() {
     // 将你的默认的任务代码放在这
   });

4、 运行 gulp：

   $ gulp

api
(1) gulp.src()

gulp.src("client/js/**/*.js") // 匹配 "client/js/somedir/somefile.js" 并且将 `base` 解析为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest("build"));  // 写入 "build/somedir/somefile.js"

gulp.src("client/js/**/*.js", { base: "client" })
  .pipe(minify())
  .pipe(gulp.dest("build"));  // 写入 "build/js/somedir/somefile.js"

(2) gulp.task()

其实gulp就是不断起一些任务函数，来运行你的项目
gulp.task("copyplugin",function(){
    gulp.src("./src/plugin/**/*")
    .pipe(gulp.dest("./dev/plugin"))
 })

 gulp.task("packscss",function(){
    gulp.src("./src/styles/app.scss")
    .pipe(sass().on("error",sass.logError))
    .pipe(gulp.dest("./dev/styles"))
 })
....

(3) gulp.watch()

 用来接听任务函数，把要接听的任务传入 启动的时候 会根据传入的任务进行执行，当然，不会按顺序
 gulp.task("watch",function(){
    gulp.watch("./src/*.html",["copyhtml"])
    gulp.watch("./src/images/**/*",["copyimg"])
    gulp.watch("./src/styles/**/*.scss",["packscss"])
 }     

(4) 当你想直接gulp启动项目的话，会使用

 gulp.task("default",["webserver","copyhtml","copyimg","copyplugin","packscss","packjs","watch"],
 function(){
    console.log("DONE")
})

其实gulp常用的就是插件，下面介绍一下项目中常用的插件，从而帮你更高效的构建项目
(1) 启动服务插件 npm i gulp-webserver -D

配置：
   引入gulp
   var gulp = require("gulp")
   
   var webserver = require("gulp-webserver")
   
   gulp.task("webserver",function(){
       gulp.src("./dev")     //编译后的根目录
       .pipe(webserver({
           host : "localhost",
           port : 4000,
           directoryListing : {   //启动项目显示目录
               enable : true,
               path : "./dev"
           },
           livereload : true
       }))
   })

(2) 编译sass npm i gulp-sass node-sass -D

var sass = require("gulp-sass")

gulp.task("packscss",function(){
   gulp.src("./src/styles/app.scss")
   .pipe(sass().on("error",sass.logError))
   .pipe(gulp.dest("./dev/styles"))
   console.log("sass编译啦")
})

(3) 编译commenjs实现模块化开发 npm i gulp-webpack -D

var webpack = require("gulp-webpack")

   gulp.task("packjs",function(){
       gulp.src("./src/scripts/app.js")
       .pipe(webpack({
           output : {
               filename : "app.js"  //输出文件为 name.js
           },
           module : {        
               loaders :[      //加载器
                   {
                       test : /.js$/,    //指定加载文件的类型
                       loader : "imports-loader",  //用imports-loader解析
                       exclude : "./node_modules"  //排除不需要编译的js文件
                   }
               ]
           }
       }))
       .pipe(gulp.dest("./dev/scripts"))
   })

(4) 解析浏览器不识别的require npm i imports-loader -D

       
  直接 $ gulp 即可
       bogon:guang_m macbook$ npm i imports-loader -D
       guang_m@1.0.0 /Users/macbook/Desktop/learning/third/guang_m
       └─┬ imports-loader@0.7.1 
         ├── loader-utils@1.1.0 
         └── source-map@0.5.7 
       
       npm WARN guang_m@1.0.0 No description
       npm WARN guang_m@1.0.0 No repository field.
       bogon:guang_m macbook$ gulp
       [15:01:40] Using gulpfile ~/Desktop/learning/third/guang_m/gulpfile.js
       [15:01:40] Starting "webserver"...
       [15:01:40] Webserver started at http://localhost:4000
       [15:01:40] Finished "webserver" after 21 ms
       [15:01:40] Starting "packscss"...

(5) 解析多个js文件 npm i vinyl-named -D

    gulp.src("./src/scripts/app.js")
    .pipe(name())
     .pipe(webpack({
       output: {
         filename: "[name].js"
       },
       module: {
         loaders: [
           {
             test: /.js$/,
             loader: "imports-loader",
             exclude: "./node_modules"
           }
         ]
       }

(6) 下载yo3 框架，专注于移动端的scss npm i yo3 -D

在node_modules中找到yo3 复制style到项目src中 
习惯性的在style中创建app.scss 用来import一些需要的文件
，再在usage中创建模块scss文件index.scss显示页面样式
   
   .m-index{
       height: 100%;
       @include flexbox();
       @include flex-direction(column);
       header{
           height: .44rem;
           background: #00b38a;
       }
       section{
           background: #fff;
           @include flex();
       }
       footer{
           height:.44rem;
           background: #f6f6f6;
   
       }
   }   

(7) 加载字符串模板 npm i string-loader -D

    loaders : [
       {
           test : /.js$/,
           loader : "imports-loader",
           exclude : "./node_modules"
       },
       {
           test : /.string$/,
           loader : "string-loader"
       }
   ]    

好了 ，常用就这些了 如果有新的知识点后续还会补充.....