2

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'
           }
       ]    

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


Cymiran
1.2k 声望134 粉丝

跨越七海的风...