Gulp-前端自动化

发表于 2016-10-19 更新于 2026-04-21 分类于 gulp 阅读次数：

简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

快速入门

基础环境

gulp自动化工具需要node环境，以及npm，如果还未安装node,请下载安装。

gulp安装

<!--全局安装-->
npm install -g gulp
<!--作为项目的开发依赖（devDependencies）安装-->
npm install --save-dev gulp

gulp文件目录

<!--创建文件夹目录，-->
<!--可命令行创建，可手动创建-->
mkdir gulpbox && cd gulpbox
mkdir lib && cd lib
mkdir images js sass view

建立package.json文件

E:\gulpbox>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulpbox)
version: (1.0.0)
description:gulp
entry point: (index.js)
test command:
git repository:
keywords:gulp
author: ovenliu
license: (ISC) MIT
About to write to E:\FrontDemo\gulpbox\package.json:

{
  "name": "gulpbox",
  "version": "1.0.0",
  "description": "gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "ovenliu",
  "license": "MIT"
}

Is this ok? (yes) yes

E:\FrontDemo\gulpbox>

安装npm包依赖(本次需要安装以下npm包)
gulp (gulp本地依赖)
gulp-concat (合并文件)
gulp-imagemin (图片压缩)
gulp-jade (编译jade文件为html文件)
gulp-jshint (javascript语法检查)
gulp-minify-css (css压缩)
gulp-rename (文件重命名)
gulp-sass (编译scss文件成css文件)
gulp-uglify (javascript代码混淆压缩)
gulp-watch (文件监听)
jshint (js检查)

npm install --save-dev gulp gulp-concat gulp-imagemin 
gulp-jade gulp-jshint gulp-minify-css gulp-rename 
gulp-sass gulp-uglify gulp-watch jshint
//cnpm速度比较慢，国内建议使用cnpm（稍等片刻，等待安装完成）

安装完成后生成node-modules目录

node-module目录

此时package.json文件内容变成：

{
  "name": "gulpbox",
  "version": "1.0.0",
  "description": "gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "ovenliu",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-jade": "^1.1.0",
    "gulp-jshint": "^2.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.9",
    "jshint": "^2.9.3"
  }
}

新建gulpfile.js文件，并添加以下代码：

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

// 引入需要的组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var cssmin=require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var jade = require('gulp-jade');
var imagemin = require('gulp-imagemin');

/*js检查任务*/
gulp.task('jshints', function() {
    gulp.src('./lib/js/*.js') //导入./lib/js/目录下所有的js文件
        .pipe(jshint())     //对文件进行语法检查
        .pipe(jshint.reporter('default')); //输出检查信息
});
/*jade转换任务*/
gulp.task('templates',function(){
    gulp.src('./lib/view/*.jade') //导入./lib/view/目录下的所有jade文件
        .pipe(jade())               //编译jade文件
        .pipe(gulp.dest('./dist/view')); //输出到指定文件夹
})
/*Sass转换任务*/
gulp.task('sass', function() {
    gulp.src('./lib/sass/*.scss')       //导入./lib/sass/目录下的所有scss文件
        .pipe(concat('all.scss'))       //合并所有文件为all.scss
        .pipe(sass())                   //编译成css文件
        .pipe(gulp.dest('./dist/css'))  //输出到指定文件夹
        .pipe(rename('all.min.css'))    //重命名为all.min.css
        .pipe(cssmin())                 //压缩css文件
        .pipe(gulp.dest('./dist/css')); //输出到指定文件夹
});

// 合并，压缩文件
gulp.task('scripts',['jshints'], function() {
    gulp.src('./lib/js/*.js')           //导入./lib/js/目录下的所有js文件
        .pipe(concat('all.js'))         //合并所有文件为all.js
        .pipe(gulp.dest('./dist/js'))   //输出到指定文件夹
        .pipe(rename('all.min.js'))     //重命名为all.min.js
        .pipe(uglify())                 //压缩混淆js文件
        .pipe(gulp.dest('./dist/js'));  //输出到指定文件夹
});

/*image照片压缩*/
gulp.task('imgmin',function(){
    gulp.src('./lib/images/*')          //导入./lin/images/目录下所有的文件
                                        //此处没有限定后缀名
        .pipe(imagemin())               //执行图片压缩（png/jpg/gif都行）
        .pipe(gulp.dest('./dist/images')); //输出到指定文件夹
})

// 默认任务
gulp.task('default', function(){
    gulp.run( 'sass', 'scripts','templates','imgmin');  //执行多个任务
});

// 监听文件变化

gulp.watch([
    './lib/js/*.js',        //监听./lib/js/目录下的所有js文件
    './lib/sass/*.scss',    //监听./lib/sass/目录下的所有scss文件
    './lib/view/*.jade'     //监听./lib/view/目录下的所有jade文件
], function(){
    gulp.run( 'default');   //文件修改后执行default任务，等同于执行了所有的任务
});

gulpfile.js解读

gulp基本语法
此处只是针对本文需要的语法进行说明，具体的详细参数和更多用法请移步官网API

gulp.task(name[, deps], fn)

gulp.task('taskname',['Dependencies'] function() {
  // do something
});
<!--注册一个任务taskname,如果需要前置条件，
则以数组形式添加到Dependencies处，回调函数function(){}内执行各项插件-->

gulp.src(globs[, options])

gulp.src('view/**/*.jade')
<!--一般写为需要处理的文件路径-->
<!--view/**/*.jade 表示view文件夹内以及其子文件夹内的所有以.jade结尾的文件-->

gulp.dest(path[, options])

1 2	gulp.dest('./dist/images') <!--输出文件到指定目录-->

.pipe(function())

gulp.src('./client/templates/*.jade')   //导入文件路径
  .pipe(jade())                         //将jade文件编译成html
  .pipe(gulp.dest('./build/templates')) //输出文件到指定目录
  .pipe(minify())                       //将文件压缩
  .pipe(gulp.dest('./build/minified_templates'));//将压缩后的文件输出到指定目录

gulp.watch(glob[, opts, cb])

<!--监听文件变化-->
<!--监听glob内的文件,一旦发生变化，就执行回调函数-->
gulp.watch([
    './lib/js/*.js',
    './lib/sass/*.scss',
    './lib/view/*.jade'
], function(){
    gulp.run( 'default');
});

gulp.run(opts)

<!--执行多个任务-->
gulp.task('default', function(){
    gulp.run( 'sass', 'scripts','templates','imgmin');
});

打开命令行工具，输入gulp

E:\gulpbox>gulp
[01:24:53] Using gulpfile E:\gulpbox\gulpfile.js
[01:24:53] Starting 'default'...
gulp.run() has been deprecated. Use task dependencies or 
gulp.watch task triggering instead.
[01:24:53] Starting 'sass'...
[01:24:53] Finished 'sass' after 7.88 ms
[01:24:53] Starting 'jshints'...
[01:24:53] Finished 'jshints' after 2.72 ms
[01:24:53] Starting 'scripts'...
[01:24:53] Finished 'scripts' after 1.03 ms
[01:24:53] Starting 'templates'...
[01:24:53] Finished 'templates' after 486 μs
[01:24:53] Starting 'imgmin'...
[01:24:53] Finished 'imgmin' after 774 μs
[01:24:53] Finished 'default' after 24 ms
[01:24:53] gulp-imagemin: Minified 2 images (saved 7.81 kB - 3.3%)

运行完成后整个目录结构为：

gulpbox完整目录

深入探索

如果想要更深入学习Gulp，请移步gulp官网。

gulp官网地址：http://www.gulpjs.com.cn/

如果想学习更多的gulp功能，请移步npm官网

npm官网地址：https://www.npmjs.com/