前端开发构建工具gulp的安装使用
2024-10-12 12:24:14
曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用。
Gulp 是用 nodejs 写的一个前端构建工具,他可以对sass、js、html、coffee等进行编译,并且提供了很多的插件,稍后会为大家介绍。
windows上的安装方法:
1、下载node-v0.10.29-x64.msi 提取码:kj9b并安装
2、运行cmd,在全局环境下安装gulp
npm install -g gulp
3、在项目的根目录下新建 package.json 文件
npm init
4、在当前项目目录下运行
npm install --save-dev gulp
注意要有--save-dev ,不然保存不到package.json 中
这样我们的gulp 管理工具就安装完成了。
5、插件安装
gulp 在编译时提供了各类的插件。
诸如 gulp-sass 、fs 等等 下面列表是我在工作中常用的一些插件,并与代码相对应。
npm install path fs gulp-sass gulp-uglify gulp-minify-css gulp-wrapper gulp-replace gulp-webserver --save-dev gulp
这里提供给大家一个网站 https://www.npmjs.com/package/package 可以查到很多gulp 的插件,非常实用。
6、在项目文件夹新建gulpfile.js 插件引用内容如下:
var gulp = require('gulp');
var path = require('path');
var fs = require('fs'); // Plugins
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var wrapper = require('gulp-wrapper');
var replace = require('gulp-replace');
var webserver = require('gulp-webserver');
7、gulpfile.js 编译代码
gulp 主要提供了
gulp.src
gulp.dest
gulp.pipe
等方法。
编译sass 文件
gulp.task('sass', function() {
gulp.src([
'css/**/*.scss',
'!css/**/_*.scss'
])
.pipe(minifyCSS())
.pipe(wrapper({
header: '/* @update: ' + getNowDate() + ' */ \n'
}))
.pipe(gulp.dest('build/css'))
});
getNowDate是个自定义的获取当前时间戳的函数。
gulp.src 是路径,! 代表不包括什么类型文件。**可以是多级目录。
如何正确编译?
// 新建 task build
gulp.task('build', function() {
gulp.run(['css']);
});
好了 gulp就介绍到这里,其他诸如 js coffee html 等等 还有各种有趣实用的插件就等客官自己去探索吧!
最新文章
- SQL SERVER 2000数据库置疑处理
- meanshift
- Linux内核中的Kconfig、xx.defconfig、xx.config、Makefile
- WebApp JS 打开 app
- C#预编译指令
- Java实战之03Spring-04Spring的数据库访问
- NSDate 的一些操作(比较、创建、在现有date加减一定时间等)
- 重写NSArray与NSDictionary的descriptionWithLocale方法
- jQuery的发展史
- 201671010133 2016-2017-2 《java程序设计》 初学java!
- 智表(ZCELL)专业版收费说明
- Python_Mix*匿名函数,sorted,filter,map,递归函数,二分法查找
- PKUWC 2019 记
- 20155208徐子涵Vim编辑器学习经验
- centos7 部署elasticsearch
- 「ZJOI2015」地震后的幻想乡
- [Android]Animation 动画介绍和实现
- Bootstrap 导航元素(标签页)
- TCP长连接和短连接的区别【转】
- Android Studio 引入 so 文件
热门文章
- 通过udl文件得到连接字符串
- CUDA编程-(3)图形流水线时代
- Python的基本语法,涵盖数据类型、循环判断、列表、map和set等
- HW4.13
- phpeclipse xdebug 配置配置 -摘自网络
- Using Live555 to Stream Live Video from an IP camera connected to an H264 encoder
- android4.0 FaceDetection笔记
- Linux主机安全配置的几个脚本【转载】
- UserControl调用Umbraco的Data Types
- 解析xlsx文件---Java读取Excel2007