gulp自动化构建工具应用

最新推荐文章于 2018-08-15 17:23:02 发布

angong8327

最新推荐文章于 2018-08-15 17:23:02 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/yingyingying/p/9041271.html

版权

什么是gulp？
　　gulp.js是一款基于Node.js的自动化构建应用工具，使用gulp可以对网站资源进行优化，如图片压缩、js/css/html代码压缩、编译sass、合并文件等。gulp不仅可以对文件进行优化，还可以将运用ES6的js文件转换为兼容的ES5，因此在编写js代码时，程序员无需再考虑ES6的兼容性问题，大大提高了代码的编写效率。

常用网站：

　　gulp官方网址：http://gulpjs.com

　　gulp插件地址：http://gulpjs.com/plugins

　　gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

　　gulp 中文API：http://www.ydcss.com/archives/424

1.安装nodejs
　　由于gulp基于node，因此第一步就是安装node
　　node官网：https://nodejs.org/en/下载安装
　　
　　安装完成后点击开始---运行---cmd 或者 win+r 组合键，输入cmd，打开命令提示符，检测环境是否搭建好
　　node -v:查看node版本号
　　npm -v:查看npm包管理工具版本号
　　如果以上两条命令皆运行正常且返回版本号，说明gulp的基础环境已安装好。

2.npm介绍
　　npm是在安装node时自动附带安装的包管理工具，用于管理node的插件(安装、卸载等)。
　　安装插件：npm install <插件名> [-g] [--save-dev]
　　　　　　　-g　　　　全局环境安装
　　　　　　　-save　　将配置信息保存至node项目配置文件package.json
　　　　　　　-dev　　 将插件信息保存至package.json的devDependencies节点
            如果已经存在package.json文件并且记录了配置信息，则直接执行npm install即可。
　　卸载插件：npm unstall <插件名> [-g] [--save-dev]

　　设置源：由于npm默认的下载源为国外网站，速度较慢。淘宝在国内搭建了npm镜像http://npm.taobao.org/ 使用国内源可提高下载速度
　　设置国内源并安装cnpm：npm install cnpm -g --registry=https://registry.npm.taobao.org
　　安装完成后执行cnpm -v查看版本号



3.安装gulp
　　命令行界面输入
　　cnpm install -g gulp 全局安装gulp
　　gulp -v 查看gulp的版本号，输出版本号则安装正确

4.创建初始化package.js文件
　　命令行输入
　　cnpm init  命令行会要求输入相关配置信息，可直接回车使用默认值
　　cnpm init -y 无需手动配置，直接初始化 使用默认值


5.安装插件
　　首先局部安装gulp
　　cnpm install gulp --save-dev
　　为什么安装了全局gulp还要安装局部gulp？全局gulp是为了执行gulp任务，局部gulp是为了调用其他插件。

　　安装好gulp之后即可开始自定义安装所需的插件 cnpm install <插件名(多个用空格隔开)> --save-dev

　　常用插件：
　　图片压缩：cnpm install gulp-imagemin --save-dev
　　编译sass并压缩css:cnpm install --save-dev gulp-sass-china
　　ES6转ES5：cnpm install --sava-dev gulp-babel babel-core babel-preset-env
　　js压缩：cnpm install gulp-uglify --save-dev(不支持es6压缩，因此在压缩前需要转为es5)
　　合并文件：cnpm install gulp-concat --save-dev

6.使用插件
　　安装完所需插件之后就可以进行配置使用了
　　首先新建gulpfile.js，该文件必须要与package.json和node_modules在同一目录下
　　配置gulpfile.js：

//开头引入gulp
var gulp = require("gulp");

/*
语法格式：
gulp.task()创建任务
    参数一：任务名
    参数二：[要调用执行的任务]
    参数三：回调函数

gulp.src()设置输入源
.pipe()处理管道
gulp.dest()输出源
*/

//例：压缩目录src/img/下的图片，并输出到dist/img/目录下
//引入图片压缩插件
var imgMin = require("gulp-imagemin")
//创建一个任务
gulp.task("imgMin",function(){
    gulp.src("src/img/*")
    .pipe(imgMin())
    .pipe(gulp.dest("dist/img/"))
});