gulp

gulp

 

 

gulp简介【版本4】

安装gulp

简单使用gulp

实用场景

 

 

 

gulp简介【版本4】

-当下最流行的自动化工具

什么是自动化构建工具？

就是把在构建项目中的常用操作给简化。自动完成一系列重复操作：

less -> css

coffeescript -> js

css压缩

js混淆

html压缩

img尺寸优化

gulp是使用node编写的。

入门指南：https://www.gulpjs.com.cn/docs/getting-started/

 

安装gulp

npm install -g gulp  // 全局安装

简单使用gulp

在node项目根目录下创建package.json文件【若已存在则不需要】

npm init --yes

 

作为项目的开发依赖（devDependencies）安装

npm install gulp --save-dev

--save：表示项目依赖，可简写为 -S。项目依赖比如bootstrap库，js库，svg库等。

-dev：表示开发依赖，可简写为 -D。开发依赖比如一些项目构建工具，压缩打包工具等

 

新建gulpfile.js文件：

var gulp = require('gulp');// 引入gulp模块

// 新建一个任务
gulp.task('say',function() {
    console.log(123);
});

根目录下运行gulpfile.js文件：

gulp say

 

gulp自动化：

gulp.task('copy', () => {
    // gulp.src相当于一个文件指针，指向这个file，
    // 使用pipe类似于管道流，gulp.dest()指向目标文件
    // 意思是将index.html复制到dist目录下[覆盖式复制]
    gulp.src('./src/index.html').pipe(gulp.dest('./dist/'));
});


gulp.task('reload', () => {
    // watch监视一个文件，并且在文件进行改动的时候做一些事情
    gulp.watch('./src/index.html', gulp.parallel('copy','reload'));
});

执行：

gulp reload

每当src目录下index文件发生改变，都会去并发的执行两个任务copy和reload.

 

gulp版本4抛弃了依赖参数，用执行函数来替代

版本4之前：

gulp.task('reload', () => {
    // watch监视一个文件，并且在文件进行改动的时候做一些事情
    gulp.watch('./src/index.html', ['copy','reload']);
});

版本4不在兼容之前的写法：

watch的第二个参数不在是一个数组，而是一个function。在上例中：

 gulp.series 用于串行（顺序执行）

 gulp.parallel 用于并行执行

上面两个函数接收两个参数：

 要执行的任务名称

 需要执行的函数

 

 

另外一种自动化工具grunt，了解即可。

 

 

 

实用场景

/*
 * @Author: iceStone
 * @Date:   2016-01-27 10:21:56
 * @Last Modified by:   iceStone
 * @Last Modified time: 2016-01-27 11:08:35
 */

'use strict';
/**
 * 1. LESS编译 压缩 合并
 * 2. JS合并 压缩 混淆
 * 3. img复制
 * 4. html压缩
 */

// 在gulpfile中先载入gulp包，因为这个包提供了一些API
var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');

// 1. LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包
gulp.task('style', function() {
  // 这里是在执行style任务时自动执行的
  gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// 2. JS合并 压缩混淆
gulp.task('script', function() {
  gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// 3. 图片复制
gulp.task('image', function() {
  gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var htmlmin = require('gulp-htmlmin');
// 4. HTML
gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var browserSync = require('browser-sync');
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: ['dist']
    },
  }, function(err, bs) {
    console.log(bs.options.getIn(["urls", "local"]));
  });

  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
});