gulp基础教程

发表于 | 分类于 ， | 浏览 次

入门指南–引用gulp官网示例

全局安装 gulp：

1
$ npm install --global gulp

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

1
$ npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件：

1
2
3
4
5
var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行 gulp

1
$ gulp  //默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

至此，一个简单的gulp已经完成，接下来让我们来完善部分功能

gulp功能完善

生成package.json文件

1
$ npm init //一直回车，有需要的可以设置

安装所需包

使用淘宝镜像

1
2
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
示例 $ cnpm install [name]

接着

1
$ cnpm i browser-sync gulp gulp-clean-css gulp-imagemin gulp-rename  gulp-sass gulp-uglify gulp.spritesmith gulp-autoprefixer --save

新建gulpfile.js文件

添加

1
2
3
4
5
6
7
8
9
var gulp         = require('gulp'); 
var browserSync  = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload，所有的浏览器将被告知的变化并实时更新
var sass         = require('gulp-sass'); //sass转css
var reload       = browserSync.reload; 
var minifyCSS    = require('gulp-clean-css')  //css压缩
var uglify       = require('gulp-uglify') //js压缩
var imagemin     = require('gulp-imagemin') //图片压缩
var rename       = require('gulp-rename') //文件重命名
var autoprefixer = require('gulp-autoprefixer') //自动添加前缀

设置默认文件地址

1
2
3
4
5
6
7
8
code为文件夹，里面存放html css js文件
var src = {
    scss: 'code/scss/*.scss',
    css:  'code/css/*.css',
    html: 'code/*.html',
    js:   'code/js/*.js',
    images: 'code/images/*.{png,jpg,gif,ico}'
};

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
name: 任务的名字
deps: 一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。
fn: 该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

// 静态服务器 + 监听 scss/html 文件
 gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./code"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.css, ['css']);
    gulp.watch(src.images, ['images'])
    gulp.watch(src.js, ['js']);
    gulp.watch(src.html).on('change', reload);

});

scss编译后的css将注入到浏览器里实现更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass())
        .pipe(minifyCSS({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(autoprefixer())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});

雪碧图（有需要可以尝试）

1
2
3
4
5
6
7
8
9
10
11
12
var spritesmith = require('gulp.spritesmith');
 
 gulp.task('sprite', function () {
      return gulp.src('code/images/*.png')
         .pipe(spritesmith({
             imgName:'images/sprite20161010.png',  //保存合并后图片的地址
             cssName:'css/sprite.css',   //保存合并后对于css样式的地址
             padding:20,
             algorithm:'binary-tree',
         }))
         .pipe(gulp.dest('code/scss'));
 });

监听css文件

1
2
3
4
5
6
7
gulp.task('css', function() {
    return gulp.src(src.css)
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});

监听js文件

1
2
3
4
5
6
7
8
9
10
gulp.task('js', function() {
    // 1. 找到文件
    return  gulp.src(src.js)
        //2. 压缩文件
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        //3. 另存压缩后的文件
        .pipe(gulp.dest('code/dest'))
        .pipe(reload({stream: true}));
})

压缩图片任务

1
2
3
4
5
6
7
8
9
10
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
        // 1. 找到图片
        gulp.src(src.images)
        // 2. 压缩图片
        .pipe($.imagemin())
        // 3. 另存图片
        .pipe(gulp.dest('images'))
        .pipe(reload({stream: true}));
});

最后控制台输入gulp执行

1
gulp.task('default', ['serve']);

如果觉得帮助到了你，欢迎star -> https://github.com/wclimb/wclimb.github.io

完整代码

文件目录

1
2
3
4
5
6
7
8
9
10
11
12
-code
    -imgage
       1.png
    -css
       default.css
    -scss
       default.scss
    -js
       default.js
    index.html
gulpfile.js
package.json

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "Gulp & SASS",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.0.3",
    "gulp-imagemin": "^3.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.1",
    "gulp.spritesmith": "^6.4.0",
    "gulp-autoprefixer": "^4.0.0"
  },
  "dependencies": {
    
  }
}

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
var gulp         = require('gulp'); 
var browserSync  = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload，所有的浏览器将被告知的变化并实时更新
var sass         = require('gulp-sass'); //sass转css
var reload       = browserSync.reload; 
var minifyCSS    = require('gulp-clean-css')  //css压缩
var uglify       = require('gulp-uglify') //js压缩
var imagemin     = require('gulp-imagemin') //图片压缩
var rename       = require('gulp-rename') //文件重命名
var autoprefixer = require('gulp-autoprefixer') //自动添加前缀


var src = {
    scss: 'code/scss/*.scss',
    css:  'code/css/*.css',
    html: 'code/*.html',
    js:   'code/js/*.js',
    images: 'code/images/*.{png,jpg,gif,ico}'
};

// 静态服务器 + 监听 scss/html 文件
 gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./code"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.css, ['css']);
    gulp.watch(src.images, ['images'])
    gulp.watch(src.js, ['js']);
    gulp.watch(src.html).on('change', reload);

});


// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass())
        .pipe(minifyCSS({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(autoprefixer())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css")) //重新输出数据到某个文件夹，如果没有就会自动创建
        .pipe(reload({stream: true}));
});


// 雪碧图（有需要可以尝试）
//var spritesmith = require('gulp.spritesmith');
 
// gulp.task('sprite', function () {
//     return gulp.src('code/images/*.png')
//         .pipe(spritesmith({
//             imgName:'images/sprite20161010.png',  //保存合并后图片的地址
//             cssName:'css/sprite.css',   //保存合并后对于css样式的地址
//             padding:20,
//             algorithm:'binary-tree',
//         }))
//         .pipe(gulp.dest('code/scss'));
// });


gulp.task('css', function() {
    return gulp.src(src.css)
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});


gulp.task('js', function() {
    // 1. 找到文件
    return  gulp.src(src.js)
        //2. 压缩文件
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        //3. 另存压缩后的文件
        .pipe(gulp.dest('code/dest'))
        .pipe(reload({stream: true}));
})



// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
        // 1. 找到图片
        gulp.src(src.images)
        // 2. 压缩图片
        .pipe($.imagemin())
        // 3. 另存图片
        .pipe(gulp.dest('images'))
        .pipe(reload({stream: true}));
});


gulp.task('default', ['serve']);
坚持原创技术分享，您的支持将鼓励我继续创作！