[转]gulp构建前端工程

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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

什么是gulp？

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

gulp和grunt的异同点

易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。

高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。

高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。

易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。

因为 gulp 是用 node.js 写的，所以你需要在你的终端上安装好 npm 。 npm 是 node.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'));

});