gulp安装及使用

gulp自动化构建工具

参考网址：
https://www.gulpjs.com.cn/
http://www.ydcss.com/archives/18

gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

安装及使用方法

使用：

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1. 安装NodeJS
package.json – 是NodeJS项目的配置文件，使用 npm init -y 生成该文件

 npm install package-name --save-dev

– 安装包资源
– --save-dev 是将安装的包资源信息保存到 package.json 文件中

选装 cnpm

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

2. 全局安装 gulp
命令： cnpm install gulp -g

以上步骤全局安装（安装NodeJS、安装cnpm、安装gulp）只做一次即可以下操作步骤每个项目下都按步骤执行即可

3. 项目目录下使用cmd生成 package.json 文件：
命令：npm init -y

4. 项目安装 gulp，即在项目目录下安装： 命令：cnpm i gulp --save-dev – i 是 install 的简写安装好后，会在项目目录下生成 node_modules 的文件夹，会将安装的 gulp 包资源信息添加到 package.json 文件的 “devDependencies” 对象属性中。

5. 安装 gulp 插件：

gulp-clean-css：压缩CSS（原来的gulp-minify-css不推荐使用）

cnpm i gulp-clean-css -D

– i是install的简写
– D是–save-dev的简写

gulp-htmlmin：压缩HTML

cnpm i gulp-htmlmin -D

gulp-uglify：压缩JS

cnpm i gulp-uglify -D

gulp-babel：将ES6代码转换为ES5代码

cnpm install -D gulp-babel@7 babel-core babel-preset-env

gulp-connect：webserver，支持浏览器自动刷新(浏览器中安装livereload插件，不是必须的)

cnpm install --save-dev gulp-connect

gulp-sass：编译sass文件(后缀为 .scss 的文件)

cnpm install --save-dev gulp-sass

6. 编写配置 gulpfile.js 文件（通常在项目根目录下创建该文件）

// 引入使用的模块

 const gulp = require("gulp"), 			
    minifyCss = require("gulp-clean-css"), // 压缩CSS
    sass = require("gulp-sass"),//sass文件转化为css文件
    babel = require("gulp-babel"),//es6转换es5
    uglify = require("gulp-uglify"),//压缩js
    htmlmin = require("gulp-htmlmin"),//压缩html
    connect = require("gulp-connect");//浏览器自动刷新
    //有需要的模块就按照以上方式引入

// 定制任务

gulp.task("css", function() {//压缩css的任务，任务名为css
	gulp.src("sass/**/*.scss")//编译文件路径
		.pipe(sass())
		.pipe(minifyCss())
		.pipe(gulp.dest("dist/css"))//上线文件路径（自动生成）
		.pipe(connect.reload());//服务器重连，有了它才能自动刷新你更改的内容
});
gulp.task("js",()=>{//压缩js的任务，任务名为js
	gulp.src("js/**/*.js")
		.pipe(babel({
      	 presets: ['env']
   	 }))
		.pipe(uglify())
		.pipe(gulp.dest("dist/js"))
		.pipe(connect.reload())
});
var ops ={
	minifyJS: true,//压缩内含的JS
    minifyCSS: true//压缩内含的CSS
    removeComments: true,//清除HTML注释
    collapseWhitespace: true//压缩HTML
   //还有其他的自行百度gulp-htmlmin插件
}
gulp.task("html",()=>{//压缩html的任务
	gulp.src("./index.html")
	.pipe(htmlmin(ops))
	.pipe(gulp.dest("dist"))
	gulp.src("html/**/*.html")
	.pipe(htmlmin({ops}))
	.pipe(gulp.dest("dist/html"))
	.pipe(connect.reload())
});
gulp.task("conn",()=>{//浏览器自动刷新
	connect.server({
		livereload:true,
		root:"dist"
	});
});

gulp.task("watch",()=>{//监视文件改动，此插件gulp自带
	gulp.watch("index.html",["html"]);
	gulp.watch("scss/**/*.scss",["sass"]);
	gulp.watch("css/**/*.css",["css"]);
	gulp.watch("js/**/*.js",["js"]);
	gulp.watch("html/**/*.html",["html-html"]);
	gulp.watch("imgs/**/*.*",["imgs-copy"]);
	gulp.watch("lib/**/*.*",["lib-copy"])
});
gulp.task("default",["html","css","js","imgs-copy","lib-copy","conn","watch"]);
//定制默认任务，一次性运行所有任务

7. 运行gulp任务命令：gulp +任务名默认任务命令为：gulp
http-server 零配置服务器(webserver)，用于部署静态资源（html、css、js、image…）默认端口号为：8080。使用localhost:8080访问

cnpm install http-server -g

gulp自动化构建工具

安装及使用方法

猜你喜欢