gulp新一代前端构建利器-lol新投降机制成利器 3分钟内投不扣分

用于合并文件、压缩等的前端自动化处理工具。

Gulp官网 Gulp中文网 Gulp中文文档 Gulp插件网 Awesome Gulp StuQ-Gulp实践与原理解析 一、安装gulp环境 一、下载安装nodejs

gulp是基于node.js的，需要通过nodejs的npm安装gulp，所以首先要安装nodejs环境，通过英文官网或者中文网下载安装。

node.js插件是windows系统下的.msi工具。 只要继续下一步，软件就会自动写入环境变量，这样就可以直接在cmd命令窗口使用node或者npm命令了。 关于npm的更多信息，见文末附件。

2.全局安装gulp

首先确保你已经正确安装了nodejs环境。 然后使用以下命令全局安装 gulp。

npm install gulp -g 或者cnpm install gulp -g

登录复制

更多关于cnpm的信息见文末附件。

2. 项目流程

比如我的项目目录是：E:\gulpproject

1.生成项目需要的信息文件package.json

在cmd窗口进入gulpproject目录（见附件），输入命令npm init，一路回车，完成后自动生成package.json文件。

注意：您可能会遇到 Sorry, name can not longer contain capital letters。 这意味着项目名称不能包含大写字母。

2.在项目根目录下安装gulp

全局安装gulp后，还需要在每个会用到gulp的项目中安装一次。

执行订单

npm install gulp --save-dev

登录复制

完成后会生成一个node_modules文件夹。

3. 安装项目所需的自动化插件。 压缩js插件为gulp-uglify，压缩图片插件为gulp-image，压缩css插件为gulp-cssnano

#安装gulp-uglifynpm install gulp-uglify --save-dev#安装gulp- imagenpm install gulp-image --save-dev#安装gulp-cssnanonpm install gulp-cssnano --save-dev#安装delnpm install del --save-dev 

登录复制

4.配置项目的gulpfile.js

gulpfile.js是gulp项目的配置文件，里面包含了任务的配置。 最简单的 gulpfile.js 配置如下： 这个配置文件定义了一个默认任务。

var gulp = require('gulp');gulp.task('default',function(){        console.log('hello world');});

登录复制

工程中用到哪些功能可以添加到配置文件中。

假设我的文件目录如下： E: gulpproject 中新建了一个项目1buy，包括css、images、js 需要压缩。

创建一个新的 gulpfile.js 并将其放在 1buy 文件夹中。

下面是我使用的gulpfile.js配置，包括压缩js、css、图片、编译less等功能。

var gulp = require('gulp'),    uglify = require('gulp-uglify'),    concat = require('gulp-concat'),    rename = require('gulp-rename'),    cssnano = require('gulp-cssnano'),    image = require("gulp-image"),    del = require('del'),    less = require('gulp-less');//压缩css,压缩后的文件放入dest/cssgulp.task('minifycss', function() {    return gulp.src('css/*.css')               .pipe(cssnano()) //压缩               .pipe(gulp.dest('dest/css'));//输出});//合并并压缩css，合并压缩后的文件放入dest/cssgulp.task('concatminifycss', function() {    return gulp.src('css/*.css')                .pipe(concat('main.css'))    //合并所有css到main.css                //.pipe(gulp.dest('dest/css'))    //输出main.css到文件夹                //.pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(cssnano())//压缩                .pipe(gulp.dest('dest/css'));//输出});//压缩js，压缩后的文件放入dest/jsgulp.task('minifyjs', function() {    return gulp.src('js/*.js')                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});//合并并压缩js，合并压缩后的文件放入dest/jsgulp.task('concatminifyjs', function() {    return gulp.src('js/*.js')                .pipe(concat('main.js'))    //合并所有js到main.js                .pipe(gulp.dest('dest/js'))    //输出main.js到文件夹                .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});//压缩图片，压缩后的文件放入dest/imagesgulp.task('image',function(){    gulp.src('images/*.+(jpg|png|gif|svg)')        .pipe(image())//压缩        .pipe(gulp.dest('dest/images'));//输出});//执行压缩前，先删除dest文件夹里的内容gulp.task('clean', function(cb) {    del(['dest/*'], cb)});//编译less到cssgulp.task("less",function(){    gulp.src('css/*.less')        .pipe(less())        .pipe(gulp.dest("dest/css"));});//监视文件的变化gulp.task("watch",function(){gulp.watch("css/*.less",['less']);});//默认命令，在cmd中输入gulp后，执行的就是这个命令gulp.task('default', function() {    // 将你的默认的任务代码放在这    gulp.start('clean','concatminifycss','image','concatminifyjs');});

登录复制

下面详细介绍各个插件的具体功能。

5.执行压缩命令

运行gulp任务只要切换到gulpfile.js文件所在目录即可（windows平台使用cmd），然后在命令行执行gulp命令即可。 可以在gulp后面加上要执行的任务名，比如gulp clean，如果没有指定任务名，则执行默认名为default的任务。

三、插件功能详解（有些我没用过） 1、全局配置config

当 gulpfile.js 太大时，难以维护。 这时候可以把gulpfile中需要引用的参数放在这里，包括一些路径，功能开关等。例如：config.js内容如下：

module.exports = {    name : '.....',    devPath : '.....',    //项目根路径，根路径下可以包含多个项目    prodPath : '....', //生产路径根路径    sassPath : '.....', //SASS包含文件路径    rmHtmlWhitespace : false,//html中是否去除空格    webpackEntry : {        index : 'index.js'//js合并    },    server : {        port : 8088    }};

登录复制

注意这里使用了module.exports，这是nodejs的语法。 config 将在 gulpfile 中被 require 引用。

//加载项目配置var config = require('./config');

登录复制

2.无损图像压缩

gulp-image压缩的图片有时可以压缩80%以上，非常强大。

知乎地址：

//压缩图片，压缩后的文件放入dest/imagesgulp.task('image',function(){    gulp.src('images/*.+(jpg|png|gif|svg)')        .pipe(image())//压缩        .pipe(gulp.dest('dest/images'));//输出});

登录复制

3.js压缩和模块化

使用gulp-uglify压缩js，使用gulp-concat合并。

//压缩js，压缩后的文件放入dest/jsgulp.task('minifyjs', function() {    return gulp.src('js/*.js')                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});//合并并压缩js，合并压缩后的文件放入dest/jsgulp.task('concatminifyjs', function() {    return gulp.src('js/*.js')                .pipe(concat('main.js'))    //合并所有js到main.js                .pipe(gulp.dest('dest/js'))    //输出main.js到文件夹                .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(uglify())//压缩                .pipe(gulp.dest('dest/js'));//输出});

登录复制

下面的也可以实现，不过我没用过。

gulpRimraf() 用于删除文件夹，引用自 gulp-rimraf。

gulp.task('js', function() {    //先删除dist中的css，有时候会不更新    gulp.src('./dist/js/*.js') .pipe(rimraf({force: true})); gulp.src('./js/*.js') .pipe(plumber()) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(gulp.dest('./dist/js')) .pipe(livereload());});

登录复制

上面的jshint是用来分析代码的，比如分号没写。 通过键入命令“gulp-jshint”。

模块化合并使用webpack-stream，点击查看文档。 github上也有教程。

gulp.task('webpack', function(){    var entry = {}; for(var name in config.webpackEntry){ entry[name] = './js/' + config.webpackEntry[name]; } //排除bundle文件 return gulp.src('./js/*[^bundle].js') .pipe(plumber()) .pipe(webpack({ entry: entry, output: { filename: '[name].bundle.js', } })) .pipe(gulp.dest('./js'));});

登录复制

4.结合css压缩和模块化

类似js。

//压缩css,压缩后的文件放入dest/cssgulp.task('minifycss', function() {    return gulp.src('css/*.css')               .pipe(cssnano()) //压缩               .pipe(gulp.dest('dest/css'));//输出});//合并并压缩css，合并压缩后的文件放入dest/cssgulp.task('concatminifycss', function() {    return gulp.src('css/*.css')                .pipe(concat('main.css'))    //合并所有css到main.css                //.pipe(gulp.dest('dest/css'))    //输出main.css到文件夹                //.pipe(rename({suffix: '.min'}))   //rename压缩后的文件名                .pipe(cssnano())//压缩                .pipe(gulp.dest('dest/css'));//输出});

登录复制

5.监控gulp.watch

这个是gulp自带的，就是当你的文件改变的时候，相应的任务就会完成。 还有一个插件 gulp-watch。

监控sass中的文件变化，只要有变化就编译sass。 “**”和“*”的语法可以参考《Gulp：任务自动管理工具》

gulp.task('watch', function() {    livereload.listen();    gulp.watch('**.html', ['html']);    gulp.watch('./sass/*.scss', ['sass']);    gulp.watch('./css/*.css', ['css']);    gulp.watch('./js/*.js', ['js']);});

登录复制

监控了js、html、css和sass四个地方的变化，做了livereload的自动刷新。 这是通过“gulp-livereload”实现的。

Firefox和chrome需要分别安装插件才能运行。 chrom插件如下：

安装后，浏览器中会出现一个小按钮。 注意它是黑色的时候是在执行中。 还有就是在对应的task中添加对应的代码：

.pipe(livereload())

登录复制

6. less/sass编译和css压缩

less请参考：gulp compiles less

通过sass写css可以更模块化，多人协作也更方便。 安装 gulp-sass。 “gulpPl​​umber()”指“gulp-plumber”，任务错误中断自动重传。

gulp.task('sass', function() {    gulp.src('./sass/*.scss')            .pipe(plumber())            .pipe(sass())            .pipe(gulp.dest('./css'))            .pipe(livereload());});

登录复制

gulp-cssnano，压缩 CSS 代码。

gulp.task('css', ['sass'], function() {    //先删除dist中的css，有时候会不更新    gulp.src('./dist/css/*.css')        .pipe(rimraf({force: true}));            gulp.src('./css/*.css')        .pipe(cssnano())        .pipe(gulp.dest('./dist/css'))        .pipe(livereload());});

登录复制

7.HTML 压缩

gulp-htmlmin压缩后的html可以减少很多。 你可以看到它们都挤在一起。 有很多参数可供选择，例如删除空格。

也可以通过 gulp-replace 给静态资源文件添加版本号。

gulp.task('html', function() {    gulp.src('*.html')        .pipe(replace('__VERSION', Date.now().toString(16)))        .pipe(htmlmin({collapseWhitespace: true}))        .pipe(gulp.dest('./dist'))        .pipe(livereload());});

登录复制

8、fontmin字体压缩

网上有很多webfonts，比如国外的Font Awesome，国内的iconfont。 可以制作漂亮的自定义字体。

与西方字体不同，中文字体由于字符集较大，无法享受webfont带来的便利。 为了使中文字体能够顺应这一趋势，我们需要对它们进行挖掘。 使用指令“gulp-fontmin”。

gulp.task('font', function() {    gulp.src('font/*.+(eot|svg|ttf|woff)')      .pipe(fontmin({          text: '人晒'      }))      .pipe(gulp.dest('dist/font'));});

登录复制

配置的“仁晒”二字与未配置的“国”有明显区别。

9.启动本地调试服务器

通过gulp-connect，你可以成为一个服务器。 如果您使用notpad++ 开发页面，此命令将很有用。

gulp.task('server', function(){    var option = {        root : config.devPath,        port : config.server.port    };    if(config.server.root){        option.root = config.server.root;    }    connect.server(option);});

登录复制

上面的localhost可以改成本机的IP地址。 如果手机和电脑在同一个网段，可以直接用手机调试。

10. node_modules 目录

node_modules目录下的内容非常多，如果在每个项目下都安装，会造成很大的浪费。 可以放在每个项目的public parent中，每个目录下使用自己的gulpfile.js、config.js等配置文件。

比如项目都在public文件夹下，所以我把node_modules放在public级别。

附件一、npm介绍

npm（node package manager）nodejs包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

gulp突然出现在npm的首页。

命令提示符执行：

npm install  [-g] [--save-dev]

登录复制

1. : 节点插件名称。 示例：npm install gulp-less --save-dev

2. -g：全局安装。 会安装到C:\Users\Administrator\AppData\Roaming\npm，写入系统环境变量；

非全局安装：会安装到当前位置目录；

全局安装可以通过命令行在任何地方调用，本地安装会安装在location目录的node_modules文件夹中，通过require()调用；

3. --save：将配置信息保存到package.json（package.json为nodejs项目配置文件）；

4.-dev：保存到package.json的devDependencies节点，如果不指定-dev，会保存到dependencies节点

配置文件package.json是为了方便下载相关包。 你只需要在有这个文件的文件夹下执行“npm install”（如果你已经安装了cnpm，就用“cnpm install”）gulp新一代前端构建利器，所有需要的都会根据package.json包下载下来。

2. cnpm

由于npm安装插件是从国外服务器下载的，受网络影响较大，可能会出现异常。

国内推荐使用淘宝NPM镜像。 “这是一个完整的npmjs.org镜像，你可以使用这个代替官方版本（只读），同步频率目前为每10分钟一次，以确保它尽可能接近官方服务”

安装说明如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

登录复制

注意安装时会有错误提示，可以关闭命令窗口再打开gulp新一代前端构建利器，输入“cnpm -v”查看版本号。 cnpm 与 npm 用法完全相同。

参考

Gulp：任务自动化管理工具

Node.js系列——module.exports与exports

前端构建工具gulpjs介绍及技巧

前端自动化构建工具gulp记录

本文作者starof，由于知识本身在变化，作者也在不断学习成长，文章内容不定期更新。 为避免误导读者，便于追根溯源，转载请注明出处：如有疑问，欢迎与本人讨论，共同进步。