gulp构建项目

1.前言

gulp是基于node环境上运行的,所以在构建项目前,要先安装node

打开cmd,输入 node -v ;如果显示版本号,则为安装成功

2. 安装

• 全局安装gulp

    npm install gulp -g
  

• 切换到项目文件夹,初始化项目

  npm init
  

  初始化成功后,文件夹中会多一个package.json文件.

  
  2.png

• 切换到项目文件夹,安装gulp

     npm install gulp --save-dev
  

  安装成功后,会多一个node_modules文件夹.

  
  3.png

3.创建gulpfile.js文件

gulp需要一个文件作为主文件,所以需要创建一个js文件.

• 创建

4.png

4.大致流程

先通过gulp.src()获取到我们想处理的文件,再通过pipe()方法,将文件流导入到gulp中去,经过gulp处理后再通过gulp.dest()方法重新写入到我们指定的位置中.

5.gulp API -- gulp.src()

• 语法

gulp.src(globs[, options])

• 参数

  • glob : 数据类型 -- String/Array;为文件匹配模式,用来匹配文件路径.也可以为具体的文件路径.
  • option:可选参数,一般用不到.

• node-glob 语法

  • * 匹配0个或多个字符,但不匹配分隔符
  • ? 匹配一个字符
  • [...] 匹配方括号中的任意一个,当方括号中第一个字符是^或者!的时候,则不匹配方括号中的任意一个
  • !(pattern|pattern|pattern) 匹配与所提供的模式不匹配的任何内容
  • ?(pattern|pattern|pattern) 匹配所提供模式中的0或1个;
  • +(pattern|pattern|pattern)匹配所提供模式中的1个或多个;
  • *(a|b|c)匹配所提供模式中的0个或多个;
  • @(pattern|pat*|pat?erN) 匹配所提供的模式之一
  • ** 匹配0个或多个目录和子目录

6. gulp API -- gulp.dest()

文件输出目录

• 语法

  gulp.dest(path[, options])
  

• 参数

  • path : 类型 - String/Function;文件将被写入的路径(输出目录),也可以是函数.在函数中返回相应路径.
  • option:可选参数,一般用不到.

• 例子1

    var gulp = require('gulp');
    gulp.task('default',function(){
        gulp.src('static/css/style.css')
        .pipe(gulp.dest('dist/css'))
    })
    // 输出路径为 dist/css/style.css
  

  这里需要注意的一点是,这里输入的目录我们可以自定义,但是文件名是由src()里的名字决定的

• 例子2

  var gulp = require('gulp');
  gulp.task('default',function(){
      gulp.src('static/css/style.css')
      .pipe(gulp.dest('dist/css/xixi.css'))
  })
  // 这时的输出路径是 dist/css/xixi.css/style.css
  

  var gulp = require('gulp');
  gulp.task('default',function(){
      gulp.src('static/css/style.css')
      .pipe(gulp.dest('dist'))
  })
  // 这时的输出路径是 dist/style.css
  

  var gulp = require('gulp');
  gulp.task('default',function(){
      gulp.src('static/**/style.css')
      // static/test/style.css
      .pipe(gulp.dest('dist'))
  })
  // 这时的输出路径是 dist/test/style.css
  // 从有通配符开始出现的那部分路径开始
  

7.gulp API -- gulp.task()

• 用法

  gulp.task(name[, deps], fn)
  

• 参数

  • name : 任务的名字
  • deps:任务列表组成的数组.这些任务会在你当前任务运行之前完成.
  • fn:任务函数

• 用法

  gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
    // do something
    //执行mytask任务之前,会把数组里的任务都完成.
  });
  

• 异步问题

  gulp.task('asyn',function(){
      console.log('执行异步任务之前') //首先打印出这句
      setTimeout(function(){
          console.log('异步任务执行之后') //最后打印
      },2000)
  })
  gulp.task('default',['asyn'],function(){
      console.log('执行完asyn之后,才执行此任务.') // 第二个打印
  })
  

5.png

• 异步解决

  • fn接受一个callback

         gulp.task('asyn',function(cb){
        console.log('执行异步任务之前')
            setTimeout(function(){
            console.log('异步任务执行之后')
            cb()
        },2000)
      })
      gulp.task('default',['asyn'],function(){
          console.log('执行完asyn之后,才执行此任务.')
      })
    

  6.png

  • fn返回一个stream

     gulp.task('asyn',function(cb){
       var stream = gulp.src('*static/css/*.css')
                       .pipe(minify()) //异步操作
                       .pipe(gulp.dest('dist/css'))
       return stream;
       })
       gulp.task('default',['asyn'],function(){
       })
    

  • fn返回一个promise

       var Q = require('q');
       gulp.task('asyn', function() {
         var deferred = Q.defer();
         // 执行异步的操作
         setTimeout(function() {
           deferred.resolve();
         }, 1);
         return deferred.promise;
       });
    

• 顺序

  gulp.task('one', function(cb) {
      //do something...
      cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
  });
  // two需要依赖one来完成.
  gulp.task('two', ['one'], function() {
      // 'one' 完成后
  });
  gulp.task('default', ['one', 'two']);
  

8.gulp API -- 自动编译gulp.watch()&browserSync

vue是自动编译,只要我们改动文件,保存之后,页面就会自动刷新,gulp也可以实现这一功能.

• 安装browser-sync

  npm install browser-sync --save-dev
  

7.png

安装成功后,package.json中会增加一行代码.

• 代码

  var gulp = require('gulp'),
        browserSync = require("browser-sync").create();//浏览器实时刷新  
  gulp.task('default',function(){
      browserSync.init({
          file:['*.html','static/css/*css','static/js/*.js'],
          server:{
            baseDir:'./'
        }
      })
      gulp.watch('./*.html').on('change',browserSync.reload)
      gulp.watch('./static/css/*.css').on('change',browserSync.reload)
      gulp.watch('./static/js/*.js').on('change',browserSync.reload)
  })
  

  我的文件结构如下,这样就完成了自动编译.

8.png

8.我的配置

   var gulp = require('gulp'),
       browserSync = require("browser-sync").create(),//浏览器实时刷新 
       stylus = require('gulp-stylus'),  //处理stylus
       uglify = require('gulp-uglify'),  //压缩js
       rename = require('gulp-rename'),  //重命名
       minifyCss = require('gulp-minify-css'),//压缩CSS
       minifyHtml = require('gulp-minify-html'),//压缩html
       imagemin = require('gulp-imagemin'),//压缩图片
       pngquant = require('imagemin-pngquant'),//深度压缩图片
       concat = require("gulp-concat");//文件合并

  //处理html  
   gulp.task('html', function () {  
     var options = {  
         removeComments: true,//清除HTML注释  
         collapseWhitespace: true,//压缩HTML  
         removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"  
         removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"  
         minifyJS: true,//压缩页面JS  
         minifyCSS: true//压缩页面CSS  
     };  
   gulp.src('./*.html')  
        .pipe(minifyHtml(options))  
        .pipe(gulp.dest('./build'))  
        // .pipe(browserSync.reload({stream:true}));  //重刷页面
   });  

   //处理css
   gulp.task('stylus',function(){
       return gulp.src('./static/css/*.styl')
               .pipe(stylus())
             .pipe(gulp.dest('./static/css'))
             .pipe(minifyCss())
             .pipe(gulp.dest('./build/static/css'))
             .pipe(browserSync.reload({stream:true}));  
   })

   // 压缩js
   gulp.task('script',function () {
       gulp.src('./static/js/*.js')
           .pipe(uglify())
           // .pipe(rename('*.min.js')) //重命名
           .pipe(gulp.dest('./build/static/js'))
   })

   // 压缩图片
   gulp.task('image',function () {
              gulp.src('./static/images/*')
                 .pipe(imagemin({
                     progressive:true, //无损压缩图片
                     svgoPlugins: [{removeViewBox: false}],  // 不移除svg的viewbox属性 
                     use:[pngquant()]  //使用pngquant深度压缩
                 }))
               .pipe(gulp.dest('./build/static/images'))
               .pipe(browserSync.reload({stream:true}));  
    })

   //自动编译
   gulp.task('watch',function(){
       gulp.start('stylus');  
       browserSync.init({
           file:['*.html','static/css/*css','static/js/*.js'],
           server:{
               baseDir:'./'
           }
       })
        gulp.watch('./*.html').on('change',browserSync.reload) //仅刷新页面
       // gulp.watch('./*.html', ['html'])    执行一次html任务
       gulp.watch('./static/css/*.styl',['stylus'])
       gulp.watch('./static/js/*.js').on('change',browserSync.reload)
   })

   // 打包
   gulp.task('build',['html','stylus','script','image'])

   //开发
   gulp.task('default',['stylus','watch'])