gulp 插件及实例应用

发表于   |   分类于   |     |   阅读次数

创建好目录

全局安装 gulp 。（之前已安装好的就无需重复啦）：

1
npm install -g gulp

局部安装 gulp 。新建目录 gulp_test2 ；在该目录下，执行局部安装：

1
npm install gulp --save-dev

在新建的目录 gulp_test2 下，新建文件 gulpfile.js 、新建文件夹 src 存放未经处理的源代码文件。

安装插件

安装插件的方法为： npm instal 插件名 。

安装需要的插件：
gulp-minify-css css 压缩
gulp-concat 合并文件
gulp-uglify 压缩 js
gulp-imagemin 压缩图片
gulp-clean 删除文件
gulp-rename 重命名文件
gulp-htmlmin html压缩

1
npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

编辑 gulpfile.js 文件

打开 gulpfile.js ，在项目中引入所需的插件：

1
2
3
4
5
6
7
8
//引入插件
var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),  //CSS压缩
    concat = require('gulp-concat'),         // 文件合并
    uglify = require('gulp-uglify'),         //js压缩插件
    imagemin = require('gulp-imagemin'),	 //图片压缩
    rename = require('gulp-rename'),         // 重命名
    clean = require('gulp-clean');           // 文件删除

定义任务、执行任务：

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
//执行任务
gulp.task('default',  function() {
    gulp.start('clean','minifycss', 'minifyjs','imagemin');  // 要执行的任务
});
//css 压缩
gulp.task('minifycss', function() {
    return gulp.src('src/css/*.css')                  //被压缩的文件
         .pipe(minifycss())                       //执行压缩
         .pipe(gulp.dest('minified/css'));        //输出文件夹
});
//js 合并、压缩
gulp.task('minifyjs', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js'))                  //合并所有js到main.js
        .pipe(gulp.dest('minified/js'))           //输出main.js到文件夹
        .pipe(rename({suffix: '.min'}))           //rename压缩后的文件名
        .pipe(uglify())                           //压缩
        .pipe(gulp.dest('minified/js'));          //输出
});
//图片压缩
gulp.task('imagemin', function(){
    gulp.src('src/ztimages/*')
        .pipe(imagemin())
        // .pipe(livereload(server))
        .pipe(gulp.dest('minified/images'));
})
//压缩前，清空css、js、图片
gulp.task('clean', function() {
	gulp.src(['minified/css', 'minified/js','minified/images'], {read: false})
	.pipe(clean());
});

最后，在命令行执行： gulp ；若成功则如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
guojc@LAPTOP-LJ1HC4HN /F/GulpProjects/gulp_test2
$ gulp
[23:51:35] Using gulpfile f:\GulpProjects\gulp_test2\gulpfile.js
[23:51:35] Starting 'default'...
[23:51:35] Starting 'clean'...
[23:51:35] Finished 'clean' after 17 ms
[23:51:35] Starting 'minifycss'...
[23:51:35] Starting 'minifyjs'...
[23:51:35] Starting 'imagemin'...
[23:51:35] Finished 'imagemin' after 7.05 ms
[23:51:35] Finished 'default' after 52 ms
[23:51:35] Finished 'minifycss' after 158 ms
[23:51:37] Finished 'minifyjs' after 2.47 s
[23:51:43] gulp-imagemin: Minified 21 images (saved 44.31 kB - 3.4%)
guojc@LAPTOP-LJ1HC4HN /F/GulpProjects/gulp_test2
$

此时的文件目录机构如下：
gulp 目录结构

更多的应用、注意事项，那就得赶紧应用于实际中去探索吧！