gulp.js 是一个自动化构建工具,基于
Node.js。通过gulp可以省略前端开发中很多重复无意义的步骤,例如js/css的压缩、less/sass的编译等。
在公司的项目中,需要在测试环境中反复调试一些内容(需求要求),而我在js中使用了es6的let声明关键词与严格模式,在测试容器--微信浏览器下无法顺利运行。因此使用gulp重新构建项目,利用其特性实现自动化压缩js/css,编译less,替换js中的let为var等功能。
项目目录结构:
1 2 3 4 5 6 7 8 9 10 11 12 13
| . ├─node_modules ├─dist │ ├─css │ ├─fonts │ ├─images │ └─js └─src ├─css ├─fonts ├─images ├─js └─less
|
dist目录为构建目录,src为工程目录;
首先下载nodejs,其中也包含了npm包管理工具。
切换到项目根目录下,输入:
1
| npm install --global gulp
|
全局安装gulp。
输入:
1
| npm install --save-dev gulp
|
使其作为项目的开发依赖安装。此时会自动创建目录node_modules;
输入:
1
| npm install gulp-uglify gulp-minify-css gulp-sourcemaps gulp-less gulp-concat gulp-rename gulp-imagemin gulp-replace gulp-htmlmin --save-dev
|
安装项目所需要的插件。
使用到的插件有:
gulp-uglify:js混淆、压缩
gulp-minify-css:css压缩
gulp-sourcemaps:为less插件创建map
gulp-less:编译less文件
gulp-concat:文件合并
gulp-rename:文件重命名
gulp-imagemin:图片压缩
gulp-replace:文本替换(正则式)
gulp-htmlmin:html文件压缩(html中的css与js也会被压缩)
在根目录创建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
| var gulp=require("gulp"); var uglify=require("gulp-uglify"); var minify_css=require("gulp-minify-css"); var less=require('gulp-less'); var gulp_concat=require('gulp-concat'); var del=require('del'); var rename=require('gulp-rename'); var imagemin=require('gulp-imagemin'); var replace=require('gulp-replace'); var htmlmin=require('gulp-htmlmin'); var sourcemaps=require('gulp-sourcemaps'); function clean(path) { console.log('Clean:' + path) del(path); } gulp.task('less', function() { gulp.src('./src/less/*.less') .pipe(sourcemaps.init()) .pipe(less()) .pipe(sourcemaps.write()) .pipe(rename({ suffix: '.min' })) .pipe(minify_css()) .pipe(gulp.dest('./dist/css')); }); gulp.task('css', function() { gulp.src('./src/css/*.css') .pipe(rename({ suffix: '.min' })) .pipe(minify_css()) .pipe(gulp.dest('./dist/css')); }); gulp.task('javascripts', function() { gulp.src('./src/js/*.js') .pipe(replace('let ', 'var ')) .pipe(replace('"use strict";', '')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('./dist/js')); }); gulp.task('html', function() { var options = { removeComments: true, collapseWhitespace: true, collapseBooleanAttributes: true, removeEmptyAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, minifyJS: true, minifyCSS: true }; gulp.src('./src/*.html') .pipe(replace('let ', 'var ')) .pipe(replace('"use strict";', '')) .pipe(replace('.css', '.min.css')) .pipe(replace('.js', '.min.js')) .pipe(htmlmin(options)) .pipe(gulp.dest('./dist/')); }); gulp.task('images', function() { gulp.src(['./src/images/*.*','./src/images/**/*.*']) .pipe(imagemin()) .pipe(gulp.dest('./dist/images/')); }); gulp.task('fonts',function(){ gulp.src('./src/fonts/*.*') .pipe(gulp.dest('./dist/fonts/')); }); gulp.task('clean', function() { clean('./dist/*'); }); gulp.task('build', function(){ gulp.run('less','css','javascripts','html','images','fonts'); console.log('Done!') }); gulp.task('default', function(){ gulp.run('build'); console.log('Done!') gulp.watch(['./src/less/*.less','./src/js/*.js','./src/css/*.css','./src/*.html','./src/images/*.*','./src/images/*/*.*'], function(){ gulp.run('build'); }); });
|
与gulp有关的方法主要有以下几种:
gulp.task 定义gulp任务
gulp.run 运行gulp任务
gulp.watch 监控文件变化
gulp.src 输入文件路径
gulp.dest 指定处理完后文件输出的路径
其中参数多是以数组形式输入,例如监控多个目录:
1 2 3
| gulp.watch(['./src/less/*.less','./src/js/*.js','./src/css/*.css','./src/*.html','./src/images/*.*','./src/images/*/*.*'], function(){
});
|
gulp.task定义了任务的名称与过程。
例如
1 2 3 4
| gulp.task('default', function(){ gulp.run('build'); console.log('Done!') });
|
即定义了default任务,在执行default任务时,执行build任务并返回“Done”
default任务是默认任务,执行时直接在项目目录执行命令
即为进行default任务。
同时也可以通过gulp + 任务名 来运行指定任务,例如
即为运行名称为clean的任务。
在任务中,文件以“流”的形式在任务中流转,使用pipe可对其进行操作;.pipe可对与流通至此管道中的文件流进行相关操作。
例如,输入src/images中的所有图片进行压缩后,输出到dist/images
1 2 3 4 5
| gulp.task('images', function() { gulp.src(['./src/images/*.*','./src/images/**/*.*']) .pipe(imagemin()) .pipe(gulp.dest('./dist/images/')); });
|
gulp.src获取images与images子目录下的所有文件,传入管道中;文件流通过imagemin()管道时,其中的图片被分别压缩,最终输出到dist/images目录中。
掌握gulp基本用法后就能够使用它进行一般的工程化构建了。当需要达到某种对文件流的处理效果时,可以在网上搜索相关插件,使用
1
| npm install gulp-xxx --save-dev
|
下载与保存,在gulpfile.js中以var
xxx=require('gulp-xxx')形式定义,即可在任务中使用这种插件了。