自动化构建工具(gulp)
来源:互联网 发布:matlab gui 编程实例 编辑:程序博客网 时间:2024/05/17 05:09
gulp中文官网
gulp是基于nodejs的一套自动化构建工具,特点就是如同官网所说的一样,易于构建,易于学习,构建快速。
大致使用流程:
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
具体:
a. 安装 NodeJS,npm
npm 安装插件时语法:
npm install name [-g] [--save-dev]
b. 选择安装 cnpm,cnpm能够替换npm的功能
npm install -g cnpm --registry=https://registry.npm.taobao.org
可使用 cnpm 安装第三方插件:
cnpm install <name> [-g] [--save-dev]
c. 全局安装 gulp
cnpm install gulp -g
(注:[ ]表示可选项,-g表示全局安装,没有此参数表示仅在当前文件夹下安装,--save是存放安装信息于packge.json,-dev是表示存放在packge.json的devDependencies依赖列表中)
前 a,b,c 三步执行一次即可
以下步骤是在项目目录下执行:
d. 进入项目目录下(命令提示符下),创建 package.json 文件:
cnpm init
package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件
e. 项目本地安装 gulp:
cnpm install gulp --save-dev
项目目录下出现 node_modules 文件夹
文件合并:
gulp-concat
重命名:
gulp-rename
f. 项目本地安装 gulp 插件:
g. 项目根目录下创建 gulpfile.js 文件:
配置方法如下:
var gulp = require("gulp"),minifyCss = require("gulp-clean-css"),uglify = require("gulp-uglify"),htmlMin = require("gulp-htmlmin"),sass = require("gulp-sass"),livereload = require("gulp-livereload");// 创建gulp任务:压缩CSSgulp.task("css", function(){gulp.src("css/*.css") .pipe(minifyCss()) .pipe(gulp.dest("dist/css"));});// 创建gulp任务:压缩JSgulp.task("js", function(){gulp.src("js/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"));});// 创建gulp任务:压缩htmlgulp.task("html", function(){gulp.src("html/*.html").pipe(htmlMin({collapseWhitespace: true, minifyCSS:true, minifyJS:true})) //压缩空白:是;压缩CSS代码:是;压缩JS代码:是;.pipe(gulp.dest("dist/html"));});// 创建gulp任务:编译 SASSgulp.task("sass", function(){gulp.src("sass/*.scss").pipe(sass({outputStyle: 'compressed'})) //sass输出方式:compressed.pipe(gulp.dest("dist/css")).pipe(livereload());});// 创建gulp监视任务:监视到scss文件的修改则执行sass任务gulp.task("watch", function(){livereload.listen();gulp.watch("sass/*.scss", ["sass"]);})// 创建gulp默认任务gulp.task("default", ["css", "js"]);h. 运行任务:
命令提示符下:gulp 任务名
https://www.npmjs.com 可查询各插件使用的方式
常用插件
CSS压缩:
cnpm install gulp-clean-css --save-dev
JS压缩(暂不支持ES6语法):
cnpm install gulp-uglify --save-dev
html压缩:
cnpm install gulp-htmlmin --save-dev
sass编译:
cnpm install gulp-sass --save-dev
自动刷新:
cnpm install gulp-livereload --save-dev
安装的gulp插件要配合浏览器中的livereload插件一起使用。在访问资源时要能够自动刷新,需要在服务器环境下,即资源访问的协议为http
零配置服务器WEB容器插件:
http-server -- 只能部署静态资源
可以将任意目录变成web容器目录
cnpm install http-server -g
- 自动化构建工具(gulp)
- gulp自动化构建工具
- gulp 自动化构建工具
- gulp 自动化构建工具
- gulp前端自动化构建工具(三):gulp工具配置文件
- 前端自动化构建工具gulp
- gulp --- 前端自动化构建工具
- 配置自动化构建工具Gulp
- gulp自动化构建工具----------初探
- 前端自动化构建工具--gulp
- gulp前端自动化构建工具(二):gulp插件/gulp模块介绍
- 前段自动化构建工具gulp使用(一) 安装
- Gulp 自动化的项目构建工具
- js,css 自动化构建工具gulp初探
- nodejs之gulp自动化构建工具
- 前端自动化构建工具gulp使用指南
- 自动化构建工具Gulp配置文件gulpfile.js
- gulp.js-前端自动化构建工具
- Effective Java 读书笔记(九):并发
- Git 和 SVN 之间的五个基本区别
- Kuchiguse (20)
- Socket编程之外网访问内网
- 【算法】冒泡排序--js实现
- 自动化构建工具(gulp)
- rxjava1源码笔记(一)
- 文章标题
- 深入理解dpdk rte_ring无锁队列
- ACM1002
- Otter-入门篇3(Node搭建)
- C语言命名冲突问题
- nexus-3.6.0-02-unix.tar.gz安装(Centos下),maven setting.xml配置案例,项目root的pom.xml配置,parent-pom的pom.xml配置案例
- matlab中矩阵的操作