使用gulp构建前端工程

gulp.js 是一个自动化构建工具,基于 Node.js。通过gulp可以省略前端开发中很多重复无意义的步骤,例如js/css的压缩、less/sass的编译等。

在公司的项目中,需要在测试环境中反复调试一些内容(需求要求),而我在js中使用了es6的let声明关键词与严格模式,在测试容器--微信浏览器下无法顺利运行。因此使用gulp重新构建项目,利用其特性实现自动化压缩js/css,编译less,替换js中的let为var等功能。

项目目录结构:

.
├─node_modules
├─dist
│   ├─css
│   ├─fonts
│   ├─images
│   └─js
└─src
    ├─css
    ├─fonts
    ├─images
    ├─js
    └─less

dist目录为构建目录,src为工程目录;

首先下载nodejs,其中也包含了npm包管理工具。

切换到项目根目录下,输入:

npm install --global gulp

全局安装gulp。

输入:

npm install --save-dev gulp

使其作为项目的开发依赖安装。此时会自动创建目录node_modules;

输入:

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。

var gulp=require("gulp");//创建gulp模块
var uglify=require("gulp-uglify");//创建js混淆压缩模块
var minify_css=require("gulp-minify-css");//创建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 '))//微信不支持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,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('./src/*.html')
    .pipe(replace('let ', 'var '))//微信不支持let用法因此换成var
    .pipe(replace('"use strict";', ''))//微信不支持严格模式
    .pipe(replace('.css', '.min.css'))//将html引用的资源从css与js变成min.css与min.js
    .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 指定处理完后文件输出的路径

其中参数多是以数组形式输入,例如监控多个目录:

gulp.watch(['./src/less/*.less','./src/js/*.js','./src/css/*.css','./src/*.html','./src/images/*.*','./src/images/*/*.*'], function(){
//检测到文件变化时执行的操作
});

gulp.task定义了任务的名称与过程。

例如

gulp.task('default', function(){
    gulp.run('build');
    console.log('Done!')
});

即定义了default任务,在执行default任务时,执行build任务并返回“Done”

default任务是默认任务,执行时直接在项目目录执行命令

gulp

即为进行default任务。

同时也可以通过gulp + 任务名 来运行指定任务,例如

gulp clean

即为运行名称为clean的任务。

在任务中,文件以“流”的形式在任务中流转,使用pipe可对其进行操作;.pipe可对与流通至此管道中的文件流进行相关操作。

例如,输入src/images中的所有图片进行压缩后,输出到dist/images

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基本用法后就能够使用它进行一般的工程化构建了。当需要达到某种对文件流的处理效果时,可以在网上搜索相关插件,使用

npm install gulp-xxx --save-dev

下载与保存,在gulpfile.js中以var xxx=require('gulp-xxx')形式定义,即可在任务中使用这种插件了。