gulp构建工具工作流

先前学习了webpack,但是总是感觉webpack略显复杂,并且现在很多公司gulp工作流用的比较多,因此就入gulp的坑来踩一踩,技多不压身,霍霍霍...。

一、简介(增强和使你的工作自动化)

1. 使用简单

没有繁琐的配置,一个任务一个task。通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

2. 高效

利用node强大的工作流,快速的构建项目并减少频繁的 IO 操作。

3. 高质量

gulp生态圈有相当多优秀的插件以供我们使用,Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

4. 易学

通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

二、gulp相关api

1. gulp.src: 来源

2. gulp.dest: 目标

3. gulp.pipe: 管道

4. gulp.watch: 热加载

5. gulp.task: 任务

6. gulp.task('default')

默认任务,必须存在

三、使用(工作流程)

1. 全局安装gulp

npm install -g gulp

2. 建立项目

mkdir gulp-test && cd gulp-test

3. 初始化项目

npm init -y (会生成package.json)

4. 安装项目依赖

npm install --save-dev gulp

  1. 创建配置文件
    touch gulpfile.js

6. gulp常用的功能

转码(gulp-babel babel-preset-es2015 gulp-sass gulp-less gulp-react)、合并(gulp-concat)、压缩(gulp-uglify)、模块化(gulp-browserify)、测试(gulp-jasmine),请依次安装这些依赖。

7. 小常识

因为国外的网站比较慢 npm经常会卡住。我们可以设置镜像源或使用cnpm或者设置镜像源npm config set registry https://registry.npm.taobao.org

8. 写配置

(gulpfile一定有一个default的任务,你可以把每个任务分文件书写然后再require进来,这种方式适合多人同时书写任务时,可以防止多人修改同一文件导致的冲突)

var gulp = require("gulp");var babel = require("gulp-babel");var react = require("gulp-react");var sass = require("gulp-sass");var less = require("gulp-less");var uglify = require("gulp-uglify");var jasmine = require("gulp-jasmine");var concat = require("gulp-concat");//定义常量const transformJs = "transformJs";const transformSass = "transformSass";const transformLess = "transformLess";const test = 'test';//jsgulp.task(transformJs, function () {    return gulp.src("src/*.js")        .pipe(react())        .pipe(babel(            {                presets: ["babel-preset-es2015"]            }        ))        .pipe(concat('bundle.min.js'))        .pipe(uglify())        .pipe(gulp.dest("./dist"))});// scssgulp.task(transformSass, function () {    return gulp.src("src/css/*.scss")        .pipe(sass())        .pipe(gulp.dest("./dist"))});// lessgulp.task(transformLess, function () {    return gulp.src("src/css/*.less")        .pipe(less())        .pipe(gulp.dest("./dist"))});// jasminegulp.task(test, function () {    return gulp.src("./test/*.js")        .pipe(jasmine())});gulp.task("default", [transformJs, transformSass, transformLess, test]);

四、配置文件解读

1. 第一部分

一堆reqire,是引用gulp相应的插件。在引用之前要确保己经安装。

2. 第二部分

几个const,是定义任务名常量,有多几任务就定义多少常量。

3. 第三部分

几个task,每个task对应一个任务,具有不同的功能。可以使用 gulp xxx来启动这个任务。

4. 第四部分

default,是执行gulp之后就会开始的任务 常用参数('default',[task1,task2,...],callback[可选])。

五、执行

  1. 如果要执行default任务,直接gulp
  [09:56:04] Using gulpfile e:\oscchina\gulp-start-kit\gulpfile.js  [09:56:04] Starting 'transformJs'...  [09:56:04] Starting 'transformSass'...  [09:56:04] Starting 'transformLess'...  [09:56:04] Starting 'test'...  .  1 spec, 0 failures  Finished in 0 seconds  [09:56:04] Finished 'test' after 62 ms  [09:56:06] Finished 'transformLess' after 2.66 s  [09:56:06] Finished 'transformSass' after 2.68 s  [09:56:06] Finished 'transformJs' after 2.7 s  [09:56:06] Finished 'default' after 32 μs  Process finished with exit code 0
  1. 如果想要执行单个任务,请输入 gulp taskName,例如gulp test
  [09:56:47] Using gulpfile e:\oscchina\gulp-start-kit\gulpfile.js  [09:56:47] Starting 'test'...  .  1 spec, 0 failures  Finished in 0 seconds  [09:56:47] Finished 'test' after 77 ms  Process finished with exit code 0

六、gulp常见任务

1. 处理js

(包括转码、合并、压缩) gulp-babel babel-preset-es2015 gulp-concat gulp-uglify

gulp.task(transformJs, function () {  return gulp.src("src/*.js")      .pipe(react())      .pipe(babel(          {              presets: ["babel-preset-es2015"]          }      ))      .pipe(concat('bundle.min.js'))      .pipe(uglify())      .pipe(gulp.dest("./dist"))});

2. 处理scss

(包括转码、合并、压缩) gulp-sass gulp-concat gulp-uglify

  // scss  gulp.task(transformSass, function () {      return gulp.src("src/css/*.scss")          .pipe(sass())          .pipe(gulp.dest("./dist"))  });

3. 处理less

(包括转码、合并、压缩) gulp-less gulp-concat gulp-uglify

  // less  gulp.task(transformLess, function () {    return gulp.src("src/css/*.less")        .pipe(less())        .pipe(gulp.dest("./dist"))  });

4. 测试

gulp-jasmine

  // jasmine  gulp.task(test, function () {      return gulp.src("./test/*.js")          .pipe(jasmine())  });  //测试文件 test.spec.js  describe('test one', function () {      it('test', function () {          expect(true).toBe(true);      })  });

5. 清理

gulp-clean

gulp.task('clean', function () {  return gulp.src(config.dist + '/*', {read: false})      .pipe(clean());});

6. 热加载

gulp-util gulp-watch

  var util = require('gulp-util');  var watch = require('gulp-watch');  var config = {};  config.dist = 'dist';  config.static = [    'bin/ /*',    'package.json'  ];  // sync static resource in production mode  gulp.task('static-sync', function () {    return gulp.src(config.static, {base: './'})        .pipe(gulp.dest(config.dist));  });  gulp.task('static-sync:dev', ['static-sync'], function () {    util.log('[Sync] starting file watch');    return watch(config.static, function (obj) {      if (obj.event === 'change' || obj.event === 'add')        return gulp.src(obj.path, {base: './'})            .pipe(gulp.dest(config.dist))            .pipe(print(function () {              return '[Sync] file sync success: ' + obj.path.replace(obj.base, '');            }));      else if (obj.event === 'unlink') {        var distFilePath = obj.path.replace(__dirname, __dirname + '/' + config.dist);        return gulp.src(distFilePath)            .pipe(clean())            .pipe(print(function () {              return '[Sync] file remove success: ' + obj.path.replace(obj.base, '');            }));      }    });  });

7. debug

gulp-print

//下载npm install gulp-print//引用var gulp = require('gulp');var print = require('gulp-print');// 注册任务gulp.task('print', function() {  gulp.src('test/*.js')    .pipe(print())});

8. sourceMap

gulp-sourcemaps

  var sourcemaps = require('gulp-sourcemaps');  // compile server script in production mode  gulp.task('compile:server', function () {    if (config.babel.sourceMaps){      return gulp.src(' /*.es6', {base: './'})          .pipe(sourcemaps.init())          .pipe(babel(config.babel))          .pipe(sourcemaps.write('.', {sourceRoot: '/ustar'}))          .pipe(gulp.dest(config.dist));    }else{      return gulp.src(' /*.es6', {base: './'})          .pipe(babel({            preset:'babel-preset-es2015'            }))          .pipe(gulp.dest('./dist'));  });

9. 复制静态资源

gulp.task('static-sync', function () {    return gulp.src('src/css/*', {base: './'})        .pipe(gulp.dest('./dist'));});

10. 处理css雪碧图

gulp-css-spriter

  var gulp = require('gulp');  var spriter = require('gulp-css-spriter');  gulp.task('css', function() {    return gulp.src('./src/css/styles.css')        .pipe(spriter({            // The path and file name of where we will save the sprite sheet            'spriteSheet': './dist/images/spritesheet.png',            // Because we don't know where you will end up saving the CSS file at this point in the pipe,            // we need a litle help identifying where it will be.            'pathToSpriteSheetFromCSS': '../images/spritesheet.png'        }))        .pipe(gulp.dest('./dist/css'));  });

11. 压缩css

gulp-minify-css

  gulp.task(gulp_minify_css,function () {     return gulp.src('./dist/*.css')         .pipe(print())         .pipe(minifycss())         .pipe(gulp.dest(config.dist))  });

12. 压缩图片

gulp-imagemin

// 压缩图片  gulp.task('img', function() {    return gulp.src('src/images/*')      .pipe(imagemin({          progressive: true,          svgoPlugins: [{removeViewBox: false}],          use: [pngcrush()]      }))      .pipe(gulp.dest('./dest/images/'))      .pipe(notify({ message: 'img task ok' }));  });

13. 检查js

gulp-jshint gulp-jshint

// 检查js  gulp.task('lint', function() {    return gulp.src('src/js/*.js')      .pipe(jshint())      .pipe(jshint.reporter('default'))      .pipe(notify({ message: 'lint task ok' }));  });

14. gzip压缩

gulp-gzip

  var gulp = require('gulp');  var gzip = require('gulp-gzip');  gulp.task('compress', function() {      gulp.src('./dev/scripts/*.js')      .pipe(gzip())      .pipe(gulp.dest('./public/scripts'));  });

15. 处理前缀

gulp-autoprefixer

  var gulp = require('gulp');  var autoprefixer = require('gulp-autoprefixer');  gulp.task('default', function () {    return gulp.src('src/app.css')      .pipe(sourcemaps.init())        .pipe(autoprefixer({            browsers: ['last 2 versions'],            cascade: false        }))        .pipe(concat('all.css'))        .pipe(sourcemaps.write('.',{sourceRoot:config.dist}))        .pipe(gulp.dest('dist'));  });

七、项目地址

gulp-start-kit

关键字:gulp, node, JavaScript, node.js

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部