[转]gulp构建前端工程

摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass、LESS 优化资源,比如压缩CSS、JavaScript、压缩图片 当然Gulp能做的远不止这些。如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大,但你必须学会驾驭它。 这是这篇文章的主要目的。帮助你了解Gulp的基础用法,助你早日完成一统天下的大业。 在我们深入了解之前,我们先来说说为什么是Gulp。 为什么是Gulp? 类似Gulp的工具,我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。 已...

什么是gulp?

gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的jscss代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。

gulp和grunt的异同点

易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。  高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。  高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。  易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。  

因为gulp是用node.js写的,所以你需要在你的终端上安装好npmnpmnode.js的包管理器,所以先在你的机子上安装好node.js吧

gulp安装命令

sudo npm install -g gulp  

在根目录下新建package.json文件

npm init .

安装gulp

npm install gulp --save-dev    

安装好后再次输入gulp -v查看版本号,如下图显示则为成功:

安装插件

安装常用插件:

sass的编译                  (gulp-ruby-sass)  自动添加css前缀              (gulp-autoprefixer)  压缩css                    (gulp-minify-css)  js代码校验                  (gulp-jshint)  合并js文件                  (gulp-concat)  压缩js代码                  (gulp-uglify)  压缩图片                    (gulp-imagemin)  自动刷新页面                 (gulp-livereload)  图片缓存,只有图片替换了才压缩  (gulp-cache)  更改提醒                    (gulp-notify)  清除文件                    (del)

安装这些插件需要运行如下命令:

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev  

-save-save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分  npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分  

gulp命令

你仅仅需要知道的5个gulp命令

gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数    gulp.run(tasks...):尽可能多的并行运行多个task    gulp.watch(glob, fn):当glob内容发生改变时,执行fn    gulp.src(glob):置需要处理的文件的路径,可以是多个文件以数组的形式,也可以是正则    gulp.dest(path[, options]):设置生成文件的路径  

glob:可以是一个直接的文件路径。他的含义是模式匹配。
gulp将要处理的文件通过管道(pipe())API导向相关插件。通过插件执行文件的处理任务。

gulp.task('default', function () {...});  

gulp.task这个API用来创建任务,在命令行下可以输入$ gulp [default],(中括号表示可选)来执行上面的任务。

gulp官方API文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 插件大全:http://gulpjs.com/plugins/

开始构建项目

在项目根目录下新建一个gulpfile.js文件,粘贴如下代码:

//在项目根目录引入gulp和uglify插件  var gulp = require('gulp');  var uglify = require('gulp-uglify');    gulp.task('compress',function(){      return gulp.src('script/*.js')      .pipe(uglify())      .pipe(gulp.dest('dist'));  });  

注:gulpfile.js文件名不可更改。
项目需要用到uglify和rename插件,执行以下命令安装:

npm install --save-dev gulp-uglify  npm install --save-dev gulp-rename

以我的为例,进入gulpfile.js所在目录:

cd /Users/trigkit4/gulp-test

然后输入:

var gulp = require('gulp');  var uglify = require('gulp-uglify');  var rename = require('gulp-rename');    gulp.task('compress',function(){      return gulp.src('script/*.js')      .pipe(uglify())      .pipe(rename('jquery.ui.min.js'))      .pipe(gulp.dest('dist'));  });

该命令会安装package.json下的全部依赖,如下图所示:

完整的gulpfile.js

// 载入外挂  var gulp = require('gulp'),       sass = require('gulp-ruby-sass'),      autoprefixer = require('gulp-autoprefixer'),      minifycss = require('gulp-minify-css'),      jshint = require('gulp-jshint'),      uglify = require('gulp-uglify'),      imagemin = require('gulp-imagemin'),      rename = require('gulp-rename'),      clean = require('gulp-clean'),      concat = require('gulp-concat'),      notify = require('gulp-notify'),      cache = require('gulp-cache'),      livereload = require('gulp-livereload');     // 样式  gulp.task('styles', function() {     return gulp.src('src/styles/main.scss')      .pipe(sass({ style: 'expanded', }))      .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))      .pipe(gulp.dest('dist/styles'))      .pipe(rename({ suffix: '.min' }))      .pipe(minifycss())      .pipe(gulp.dest('dist/styles'))      .pipe(notify({ message: 'Styles task complete' }));  });     // 脚本  gulp.task('scripts', function() {     return gulp.src('src/scripts/**/*.js')      .pipe(jshint('.jshintrc'))      .pipe(jshint.reporter('default'))      .pipe(concat('main.js'))      .pipe(gulp.dest('dist/scripts'))      .pipe(rename({ suffix: '.min' }))      .pipe(uglify())      .pipe(gulp.dest('dist/scripts'))      .pipe(notify({ message: 'Scripts task complete' }));  });     // 图片  gulp.task('images', function() {     return gulp.src('src/images/**/*')      .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))      .pipe(gulp.dest('dist/images'))      .pipe(notify({ message: 'Images task complete' }));  });     // 清理  gulp.task('clean', function() {     return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})      .pipe(clean());  });     // 预设任务  gulp.task('default', ['clean'], function() {       gulp.start('styles', 'scripts', 'images');  });     // 看守  gulp.task('watch', function() {       // 看守所有.scss档    gulp.watch('src/styles/**/*.scss', ['styles']);       // 看守所有.js档    gulp.watch('src/scripts/**/*.js', ['scripts']);       // 看守所有图片档    gulp.watch('src/images/**/*', ['images']);       // 建立即时重整伺服器    var server = livereload();       // 看守所有位在 dist/  目录下的档案,一旦有更动,便进行重整    gulp.watch(['dist/**']).on('change', function(file) {      server.changed(file.path);    });     });  

注:pipe()stream模块里传递数据流的一个方法,第一个参数为插件方法,插件会接收从上游流下的文件,进行处理加工后,再往下流。

gulp.task('任务名称', function () {      return gulp.src('文件路径')          .pipe(...)          .pipe(...)          // 直到任务的最后一步          .pipe(...);  });  

如果想使用gulp直接启动服务器

添加gulp-connect    npm install gulp-connect --save-dev    添加task    gulp.task('webserver', function() {      connect.server({          livereload: true,          port: 8888      });  });

gulp插件

  • gulp-gh-pages:使用gulp来把markdown生成html文档并上传到git pages

https://github.com/shinnn/gulp-gh-pages

  var gulp = require('gulp');    var ghPages = require('gulp-gh-pages');        gulp.task('deploy', function() {      return gulp.src('./dist/**/*')        .pipe(ghPages());    });  
  • gulp-jade插件:将jade编译成html文件

  • gulp-less插件:将less编译成css文件

  var less = require('gulp-less');    var path = require('path');         gulp.task('less', function () {      return gulp.src('./less/**/*.less')        .pipe(less({          paths: [ path.join(__dirname, 'less', 'includes') ]        }))        .pipe(gulp.dest('./public/css'));    });  
  • gulp-live-server 插件:方便的,轻量级的服务器

  var gulp = require('gulp');      var gls = require('gulp-live-server');      gulp.task('serve', function() {      //1. serve with default settings      var server = gls.static(); //equals to gls.static('public', 3000);      server.start();          //2. serve at custom port      var server = gls.static('dist', 8888);      server.start();          //3. serve multi folders      var server = gls.static(['dist', '.tmp']);      server.start();          //use gulp.watch to trigger server actions(notify, start or stop)      gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {        server.notify.apply(server, [file]);      });    });  
  • gulp-livereload,可以实时保存刷新,那样就不用按F5和切换界面了

  • gulp-load-plugins:在你的package.json文件中自动加载任意的gulp插件

  $ npm install --save-dev gulp-load-plugins  

例如一个给定的package.json文件如下:

  {        "dependencies": {            "gulp-jshint": "*",            "gulp-concat": "*"        }    }  

gulpfile.js中添加如下代码:

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

plugins.jshint = require('gulp-jshint');

plugins.concat = require('gulp-concat');

  • gulp-babel:gulp 的babel插件,

  $ npm install --save-dev gulp-babel babel-preset-es2015

使用方法:

  const gulp = require('gulp');  const babel = require('gulp-babel');    gulp.task('default', () => {      return gulp.src('src/app.js')          .pipe(babel({              presets: ['es2015']          }))          .pipe(gulp.dest('dist'));  });

官方github: https://github.com/gulpjs/gulp

相关内容推荐