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

最新推荐文章于 2025-05-26 19:29:25 发布

转载最新推荐文章于 2025-05-26 19:29:25 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000012378780

文章标签：

#webpack #前端 #ViewUI

本文介绍gulp的基本概念及其在前端项目中的应用，包括安装配置、常用API及插件使用等，帮助开发者快速上手并提高构建效率。

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

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