gulp使用实例分析——yo angular的自动化任务分析

如果你了解gulp的使用方法，那么你需要一个实战的例子来帮你加深理解。

这里将会手把手教你如何搭建一个工作流，类似yo angular这样的gulpfile.js

 

---------------------------------------------------分析需求

• 我们会使用多个第三方的插件，并使用bower来嵌入
• 我们需要对样式文件进行解析，使用sass编译
• 我们要对依赖的css，js进行整合打包，并对文件hash命名，例如vendor-65b6dbc7a5.css
• 我们要对html进行注入压缩
• 开发的过程我们需要能实时预览（preview）

 

--------------------------------------------环境搭建以及需要的插件

nodejs环境

安装gulp

安装gulp插件

gulp-connect : 创建一个webserver 方便实时预览

gulp-autoprefixer：css自动添加前缀，以适应多浏览器

gulp-cache：gulp的文件缓存服务，尤其是任务处理过程中的中间文件特别有效

gulp-filter：文件匹配神器

gulp-imagemin：图片压缩神器

gulp-jshint：js语法检测

gulp-load-plugins：gulp插件自动加载神器，使用起来叼叼的！一个字，方便！

gulp-plumber：修复了pipe处理异常的bug，让任务执行更平滑

gulp-minify-css：压缩css的神器

gulp-rev：校订命名神器，将文件名附加文件内容hash后的重新命名，对于发布新版本静态资源的时候有效解决浏览器缓存问题

gulp-rev-replace：重写被rev命名后的文件索引，尤其是你使用了manifest离线缓存后这个非常有效

gulp-uglify：js压缩神器

gulp-useref：处理html中js或css占位符替换成真正的资源索引

gulp-util：这是gulp执行的界面工具，方便你输出执行过程中的信息(log)

gulp-watch：监听文件变化，并执行默认更新任务

wiredep：bower插件的依赖插入神器

lazypipe：pipe可复用的强大神器

gulp-sass：sass文件编译

open：主动打开某个网址，在编译预览时，方便！

jshint-stylish：js语法检测的格式化输出

rimraf：文件以及文件夹的操作

run-sequence：按顺序执行gulp任务，这是个过渡版本，预期以后gulp会增强相关的功能

 

--------------------------------------------------------------

开始编写gulpfile.js

 

 

我们当前的目录结构是：

--app

--package.json

--gulpfile.js

 

app中就是我们编写app的区域，我们所有gulp任务都是针对该文件夹处理的

 

============================定义加载的插件

加载gulp，以及gulp的插件（以gulp-开头所有的插件），和其他相关插件

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var openURL = require('open');

var lazypipe = require('lazypipe');

var rimraf = require('rimraf');

var wiredep = require('wiredep').stream;

var runSequence = require('run-sequence');

 

=============================定义全局路径

这里app就是我们源文件夹，dist是我们要打包输出的文件夹

var workflow = {

  app: 'app',

  dist: 'dist'

};

 

定义css，js路径以及视图路径

var paths = {

  scripts: [workflow.app + '/scripts/**/*.js'],

  styles: [workflow.app + '/styles/**/*.scss'],

  views: {      

    main: workflow.app + '/index.html',

    files: [workflow.app + '/views/**/*.html']

  }

};

 

==========================定义可复用的pipe

lintScripts预设了js语法检测的参数设置，以及语法检测日志的输出使用jshint-stylish

styles预设了css样式处理的过程，使用sass编译，使用autoprefixer自动添加前缀，并指定了输出的文件夹

var lintScripts = lazypipe()

  .pipe($.jshint, '.jshintrc')

  .pipe($.jshint.reporter, 'jshint-stylish');

 

var styles = lazypipe()

  .pipe($.sass, {

    outputStyle: 'expanded',

    precision: 10

  })

  .pipe($.autoprefixer, 'last 1 version')

  .pipe(gulp.dest, '.tmp/styles');

 

 

============================开始编写任务

styles任务将我们的样式文件按照上述预制的styles执行

gulp.task('styles', function () {

  return gulp.src(paths.styles)

    .pipe(styles());

});

lint:scripts任务负责检测我们的js语法的合法性

gulp.task('lint:scripts', function () {

  return gulp.src(paths.scripts)

    .pipe(lintScripts());

});

clean:tmp任务负责清理.tmp文件夹，注意这里有了一个cb回调，意味着其他任务需要等待该任务执行完成后才能执行

gulp.task('clean:tmp', function (cb) {

  rimraf('./.tmp', cb);

});

 

启动客户端，调用启动服务器，格式化样式，并在浏览器中打开指定网址

gulp.task('start:client', ['start:server', 'styles'], function () {

  openURL('http://localhost:9000');

});

 

启动服务器，使用connect创建一个webserver

gulp.task('start:server', function() {

  $.connect.server({

    root: [yeoman.app, '.tmp'],

    livereload: true,

    hostname: 'localhost',

    // Change this to '0.0.0.0' to access the server from outside.

    port: 9000

  });

});

 

添加监听任务，并执行相关的任务

gulp.task('watch', function () {

  $.watch(paths.styles)

    .pipe($.plumber())

    .pipe(styles())

    .pipe($.connect.reload());

 

  $.watch(paths.views.files)

    .pipe($.plumber())

    .pipe($.connect.reload());

 

  $.watch(paths.scripts)

    .pipe($.plumber())

    .pipe(lintScripts())

    .pipe($.connect.reload());

 

  $.watch(paths.test)

    .pipe($.plumber())

    .pipe(lintScripts());

 

  gulp.watch('bower.json', ['bower']);

});

 

编译启动服务器，注册了一个按序执行的任务列表，清除.tmp, 检测js语法，启动客户端（启动webserver，编译样式css）,添加监听任务

gulp.task('serve', function (cb) {

  runSequence('clean:tmp',

    ['lint:scripts'],

    ['start:client'],

    'watch', cb);

});

 

bower任务负责将bower依赖注入

gulp.task('bower', function () {

  return gulp.src(paths.views.main)

    .pipe(wiredep({

      directory: workflow.app + '/bower_components',

      ignorePath: '..'

    }))

  .pipe(gulp.dest(workflow.app));

});

 

转载于:https://www.cnblogs.com/kmweb/p/6497531.html