gulp配置笔记

新手学习gulp搭建笔记，如有错误，欢迎指正，谢谢

一、安装node.js

1. node.js下载

node.js有官方中文网，可以直接进去下载node.js的安装文件
或者点击这里进入官方下载页面

2.node.js安装

直接一路next，按照程序的默认配置安装就行，安装路径也不要改

二、安装cnpm

• 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以选择cnpm。
  安装方法：在命令提示符下执行下面的命令

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

等待程序安装完成后再执行命令查看cnpm版本

cnpm -v

确保cnpm安装成功
操作图示：

三、安装gulp

安装方法：在命令提示符下执行下面的命令

cnpm install gulp -g

安装完后在查看gulp版本号确保安装成功

gulp -v

操作图示：

—————————————————————

以上的是环境的搭建，下面开始就是针对项目进行的操作，以HBuild开发为例

—————————————————————

四、创建package.json文件

1. 在项目的根目录下创建package.json的空白文档（文件名一定要为package）
在目标项目>点击鼠标右键>新建>Json文件

在命令行进入项目根目录（之后的命令在根目录下进行）
例如：项目目录在C:\Users\admin\Documents\HBuilderProjects\gulpDemo
在命令行执行:

cd C:\Users\admin\Documents\HBuilderProjects\gulpDemo

或者在资源管理器进入项目目录，”shift” + 鼠标右键 选择”在此处打开命令窗口”

2. 初始化package.json文件
在命令行项目根目录执行：

cnpm init

接着填写一些信息
操作图示：

文件中会自动生成文件内容：

{
“name”: “gulptest”,//项目名称（必须）
“version”: “0.0.1”,//项目版本（必须）
“description”: “这是一个gulp的测试程序”,//项目描述（必须）
“homepage”: “”, //项目主页
“main”: “index.js”,//入口文件
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”
},
“keywords”: [//关键词
“gulp”
],
“author”: “wuxunxun007”,//作者
“license”: “ISC”//项目许可协议
}

五、安装gulp插件（以less插件为例）

在命令行项目根目录执行下面两个命令：

cnpm install gulp –save-dev
cnpm install gulp-less –save-dev

操作图示：

安装完成后，package.json文件会增加以下内容

“devDependencies”: { //项目依赖的插件
“gulp”: “^3.9.1”,
“gulp-less”: “^3.3.2”
}

项目目录会增加node_modules文件夹

注意：该文件夹文件过多，层级过深，扫描时导致电脑卡顿，可以选择该文件夹，点击鼠标右键>扫描索引>从扫描目录中移除以加快建立索引

六、创建less写样式

1. 创建less文件：

在css文件夹（或者其他文件夹啊）>点击鼠标右键>新建>less文件

2.编译less 文件

在命令行进入css文件夹目录（less的文件夹目录），执行命令
lessc less文件全程（加后缀） > 编译后css文件存放路径（包括文件名）
例如执行mian.less

lessc main.less > main.css

—————————————————————

到此为止搭建好less的开发环境，可以使用less写css样式，但是每次手动编译太麻烦，下面介绍如何让less每次保存后自动编译

七、使less每次改变后自动编译

1. 在根目录创建gulpfile.js文件

目标项目>鼠标右键>新建>javascript文件

2. 在js文件中写操作less文件变化的程序

第一步先拿到gulp对象和gul-less对象

/* * 拿到gulp对象 * gulp和gulp-less指gulp和gulp-less插件 */var gulp = require("gulp");var less = require("gulp-less");

第二部定义一个任务用于把less文件自动编译为css文件

/* * 定义一个watchLess任务把less文件自动编译为css文件 * 在命令行执行gulp watchLess时会自动编译less文件 */gulp.task("watchLess",function(){    /*     * css/*.less：指监听css目录下的所有less文件，如果需要监听某一个可以单独写某一个文件路径     * gulp.dest("css")：是把less文件编译后的css文件放到css目录下的意思     */    gulp.src("css/*.less").pipe(less()).pipe(gulp.dest("css"));});

如果需要监听多个文件或目录，可以写多个任务，到这一步，只要在该项目根目录的命令行中输入 gulp + 任务名 就可以让程序把less编译成css文件了

有多个任务是可以把多个任务集成到一个任务执行

/* * 可以把多个任务作为一个任务，在"[]"里填写想要执行的任务名用","隔开 * 定义一个名为default的任务，因为default为默认的， * 所以执行default任务时可以直接使用 gulp不用加任务名 */gulp.task("default",[watchLess],function(){    console.log("我已经全部搞定了~~");//所有任务执行完打印日志});

现在直接在根目录的命令行执行 gulp 命令就可以编译less文件了

实现实时监听

//实时监听less文件变化gulp.task("watch",function(){    //监听css/*.less目录下文件的改变，一改变就执行watchLess任务    gulp.watch("css/*.less",["watchLess"]);});

现在只要在项目的根目录命令行中执行该任务 gulp watchless文件一改变，程序就会自动帮你编译了

—————————————————————

下面实现监听项目的less、img、html文件，当有文件更新时less实时编译，浏览器实时刷新

—————————————————————

八、实现监听整个项目改动并进行更新(热更新)

建议把所有文件路劲定义为变量，方便修改

1. 给项目安装热更新插件

要先安装热更新插件之后才能使用热更新
安装方法：在根目录的命令行执行

cnpm install gulp-less –save-dev

操作图示

2. 在gulpfile.js写监听程序

先获取gulp-connect插件对象，在gulpfile.js写上

var connect = require("gulp-connect");

首先部署热更新，在gulpfile.js写上

//部署热更新 gulp.task("server",function(){    //root后的双引号填写html，css，less等文件夹存放的目录，如果放在根目录直接不填    connect.server({root:"src",livereload:true});});

例如文件目录如下图，则root后填写src

若文件目录如下，则可以不填写

之前的watchLess任务实现了把less文件自动编译成css文件的功能，现在只要再加上刷新浏览器就可以了

gulp.src("css/*.less")//设置less文件的路径.pipe(less()).pipe(gulp.dest("css"))//css文件保存路径.pipe(connect.reload());//刷新浏览器

HTML文件改动操作代码

gulp.task("watchHTML",function(){    gulp.src("*.html").//设置HTML文件的路径    pipe(connect.reload());//刷新浏览器});

JS文件改动操作代码

gulp.task("watchJavascript",function(){    gulp.src("js/*.js").//设置Javascript文件的路径    pipe(connect.reload());//刷新浏览器});

图片改动操作代码

gulp.task("watchImg",function(){    gulp.src("img/*.{png,jpg}").//设置Javascript文件的路径    pipe(connect.reload());//刷新浏览器});

修改之前实时监听的watch任务，把HTML，js，图片的任务也添加到实时监听里

gulp.task("watch",function(){    //监听css路径下的所有less文件，一旦发生变化就执行编译任务：testLess    gulp.watch(watchLess,["testLess"]);    gulp.watch(watchHtml,["testHtml"]);    gulp.watch(watchJs,["testJs"]);    gulp.watch(watchImg,["testImg"]);});

定义一个default任务，执行watch任务和热更新的server任务

gulp.task("default",["watch","server"]);

定义的default任务是默认任务，所以只要在根目录的命令行下运行gulp就可以执行default任务了。default任务执行了watch和server任务，在命令行运行gulp命令（使用时不要关闭命令行窗口）后，只要项目的less或html等文件改变时，浏览器就会实时刷新了。

下面使完整的gulpfile.js文件代码，文件路径使用变量定义了

//定义各个文件的路径var lessSrc = "css/*.less";//less文件目录var cssSrc = "css";//css文件目录var htmlSrc = "*.html";//html文件目录var jsSrc = "js/*.js";//js文件目录var imgSrc = "img/*.{png,jpg}";//图片文件目录/* * 拿到需要的对象 */var gulp = require("gulp");//获取gulp对象var less = require("gulp-less");//获取gulp-less插件对象var connect = require("gulp-connect");//获取gulp-connect对象/* less文件 * 定义一个watchLess任务把less文件自动编译为css文件 * 在命令行执行gulp watchLess时会自动编译less文件 */gulp.task("watchLess",function(){    /*     * css/*.less：指监听css目录下的所有less文件，如果需要监听某一个可以单独写某一个文件路径     * gulp.dest("css")：是把less文件编译后的css文件放到css目录下的意思     */    gulp.src(lessSrc).//设置less文件的路径    pipe(less()).    pipe(gulp.dest(cssSrc)).//css文件保存路径    pipe(connect.reload());//刷新浏览器});/* * HTML文件 */gulp.task("watchHTML",function(){    gulp.src(htmlSrc).//设置HTML文件的路径    pipe(connect.reload());//刷新浏览器});/* * js文件 */gulp.task("watchJavascript",function(){    gulp.src(jsSrc).//设置Javascript文件的路径    pipe(connect.reload());//刷新浏览器});/* * 图片文件 */gulp.task("watchImg",function(){    gulp.src(imgSrc).//设置Javascript文件的路径    pipe(connect.reload());//刷新浏览器});//部署热更新 gulp.task("server",function(){    //root后的双引号填写html，css，less等文件夹存放的目录，如果放在根目录直接不填    connect.server({root:"",livereload:true});});//实时监听less文件变化gulp.task("watch",function(){    //监听css/*.less目录下文件的改变，一改变就执行watchLess任务    gulp.watch("css/*.less",["watchLess"]);    gulp.watch("*.html",["watchHTML"]);    gulp.watch("js/*.js",["watchJavascript"]);    gulp.watch("img/*.{jpg,png}",["watchImg"]);});gulp.task("default",["watch","server"]);

—————————————————————————–

gulp还有项目打包功能，下面是搭建项目自动打包的教程，为了分清开发的文件和打包完的文件，把项目结构分为下图

src文件夹放编写的文件，dist文件夹放压缩后的文件，注意保持src和dist文件夹的目录结构一致

—————————————————————————–

九、 配置js压缩工具

1. 安装js压缩插件gulp-uglify

在项目根目录的命令行下执行

cnpm install gulp-uglify –save-dev

2. 拿到gulp-uglify插件对象

var uglify = require("gulp-uglify");

3. 修改gulpfile.js文件

只要在gulpfile.js文件中，js文件改动时调用的任务的代码中加入把js文件压缩克隆到dist对应文件夹的代码就可以了
因为项目文件结构改变了，所以对应的路径也要发生变化，把路径全部定义为变量

//开发文件的路径var lessSrc = "src/css/*.less";//less文件目录var cssSrc = "src/css";//css文件目录var htmlSrc = "src/*.html";//html文件目录var jsSrc = "src/js/*.js";//js文件目录var imgSrc = "src/img/*.{png,jpg}";//图片文件目录//压缩后文件存放目录var cssDist = "dist/css";//压缩后css文件存放目录var htmlDist = "dist";//压缩后html文件存放目录var jsDist = "dist/js";//压缩后js文件存放目录var imgDist = "dist/img";//压缩后图片文件存放目录

js的代码改成

gulp.task("watchJavascript",function(){    gulp.src(jsSrc).//设置Javascript文件的路径    pipe(uglify()).//压缩js文件    pipe(gulp.dest(jsDist)).//设置压缩存放路径    pipe(connect.reload());//刷新浏览器});

十、 配置css压缩工具

1. 安装js压缩插件gulp-clean-css

在项目根目录的命令行下执行

cnpm install gulp-clean-css –save-dev

2. 拿到gulp-clean-css插件对象

var cleanCss = require("gulp-clean-css");

3. 修改gulpfile.js文件

只要在gulpfile.js文件中，less文件改动时调用的任务的代码中加入把css文件压缩克隆到dist对应文件夹的代码就可以了

less的代码改成

gulp.task("watchLess",function(){    gulp.src(lessSrc).//设置less文件的路径    pipe(less()).    pipe(gulp.dest(cssSrc)).//css文件保存路径    pipe(cleanCss()).//压缩css文件    pipe(gulp.dest(cssDist)).//设置压缩后css文件存放路径    pipe(connect.reload());//刷新浏览器});

十一、 配置img压缩工具

1. 安装js压缩插件gulp-imagemin

在项目根目录的命令行下执行

cnpm install gulp-imagemin –save-dev

2. 拿到gulp-imagemin插件对象

var imagemin = require("gulp-imagemin");

3. 修改gulpfile.js文件

只要在gulpfile.js文件中，修改img的任务代码

less的代码改成

gulp.task("watchImg",function(){    gulp.src(imgSrc).//设置Javascript文件的路径    pipe(imagemin()).    pipe(gulp.dest(imgDist)).//设置压缩存放路径    pipe(connect.reload());//刷新浏览器});

十二、 HTML克隆

由于html文件不用压缩，所以只要修改html任务的代码让程序自动把html文件克隆到dist文件下就可以了

修改后代码

gulp.task("watchHTML",function(){    gulp.src(htmlSrc).//设置HTML文件的路径    pipe(gulp.dest(htmlDist)).    pipe(connect.reload());//刷新浏览器});

完整的gulpfile.js代码

/* * 定义各个文件的路径 *///开发文件的路径var lessSrc = "src/css/*.less";//less文件目录var cssSrc = "src/css";//css文件目录var htmlSrc = "src/*.html";//html文件目录var jsSrc = "src/js/*.js";//js文件目录var imgSrc = "src/img/*.{png,jpg}";//图片文件目录//压缩后文件存放路径var cssDist = "dist/css";//压缩后css文件存放目录var htmlDist = "dist";//压缩后html文件存放目录var jsDist = "dist/js";//压缩后js文件存放目录var imgDist = "dist/img";//压缩后图片文件存放目录/* * 拿到需要的对象 */var gulp = require("gulp");//获取gulp对象var less = require("gulp-less");//获取gulp-less插件对象var connect = require("gulp-connect");//获取gulp-connect对象var uglify = require("gulp-uglify");//获取gulpo-uglify对象var cleanCss = require("gulp-clean-css");//获取gulp-clean-css对象var imagemin = require("gulp-imagemin");//获取gulp-imagemin对象/* 监听less文件 * 定义一个watchLess任务把less文件自动编译为css文件 * 在命令行执行gulp watchLess时会自动编译less文件 */gulp.task("watchLess",function(){    /*     * css/*.less：指监听css目录下的所有less文件，如果需要监听某一个可以单独写某一个文件路径     * gulp.dest("css")：是把less文件编译后的css文件放到css目录下的意思     */    gulp.src(lessSrc).//设置less文件的路径    pipe(less()).    pipe(gulp.dest(cssSrc)).//css文件保存路径    pipe(cleanCss()).//压缩css文件    pipe(gulp.dest(cssDist)).//设置压缩后css文件存放路径    pipe(connect.reload());//刷新浏览器});/* * 监听HTML文件 */gulp.task("watchHTML",function(){    gulp.src(htmlSrc).//设置HTML文件的路径    pipe(gulp.dest(htmlDist)).    pipe(connect.reload());//刷新浏览器});/* * 监听js文件 */gulp.task("watchJavascript",function(){    gulp.src(jsSrc).//设置Javascript文件的路径    pipe(uglify()).//压缩js文件    pipe(gulp.dest(jsDist)).//设置压缩存放路径    pipe(connect.reload());//刷新浏览器});/* * 监听图片文件 */gulp.task("watchImg",function(){    gulp.src(imgSrc).//设置Javascript文件的路径    pipe(imagemin()).//压缩img文件    pipe(gulp.dest(imgDist)).//设置压缩存放路径    pipe(connect.reload());//刷新浏览器});//部署热更新 gulp.task("server",function(){    //root后的双引号填写html，css，less等文件夹存放的目录，如果放在根目录直接不填    connect.server({root:"src",livereload:true});});/* * 可以把多个任务作为一个任务，在"[]"里填写想要执行的任务名用","隔开 * 定义一个名为default的任务，因为default为默认的， * 所以执行default任务时可以直接使用 gulp不用加任务名 *///gulp.task("default",["watchLess"],function(){//  console.log("我已经全部搞定了~~");//});//实时监听less文件变化gulp.task("watch",function(){    //监听css/*.less目录下文件的改变，一改变就执行watchLess任务    gulp.watch(lessSrc,["watchLess"]);    gulp.watch(htmlSrc,["watchHTML"]);    gulp.watch(jsSrc,["watchJavascript"]);    gulp.watch(imgSrc,["watchImg"]);});gulp.task("default",["watch","server"]);

———————————————————