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

  配置：引入gulpvar 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 -Dguang_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 descriptionnpm 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'}]    

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