gulp前端自动化入门

一、从零开始搭建gulp前端自动化

1、首先安装nodejs

2、npm init生成package.json

2、定位到当前目录 cd..   d:   我在d盘新建了文件夹gulp

3、npm install --save-dev  安装gulp

4、新建gulpfile.js  需要安装npm install --save-dev gulp-less  | npm install --save-dev gulp-uglify | npm install --save-dev gulp-autoprefixer

var gulp = require("gulp"),
	less = require("gulp-less"),
	uglify = require("gulp-uglify"),
	autoprefixer = require("gulp-autoprefixer");

	gulp.task(‘testLess‘,function(){
		gulp.src(‘src/less/index.less‘)
		.pipe(less())
		.pipe(gulp.dest(‘src/css‘));
	});
	//gulp.task(‘default‘,[‘testLess‘,‘elseTask‘]);
	gulp.task(‘jsMin‘,function(){
		gulp.src([‘src/js/*.js‘])
		.pipe(uglify())
		.pipe(gulp.dest(‘dist/js‘));
	});
	gulp.task(‘testAutoFx‘,function(){
		gulp.src([‘src/css/my.css‘])
		.pipe(autoprefixer({
			browsers:[‘last 2 versions‘,‘Android >=4.0‘],
			cascade:true,
			remove:true
		}))
		.pipe(gulp.dest(‘dist/css‘))
	});

参考文章http://www.ydcss.com/

时间: 2024-08-10 18:18:53

gulp前端自动化入门的相关文章

gulp 前端自动化工具

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用

gulp前端自动化构建工具入门篇

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率. 为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合

(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is

gulp 前端自动化构建工具

gulp是基于nodejs的自动化构建工具, 可自动化完成js css sass less html image的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成.监听文件. 1:基于nodejs先装nodejs(.msi) 2:命令行装npm,npm是nodejs的包管理工具,对node插件进行安装.卸载等 npm install XX -g  安装XX插件 全局安装 --save 将保存配置保存至package.json(package.json把安装插件信息保存到此,可供其他开

gulp前端自动化构建入门指南(一)

1. 安装node.js 1-1. gulp运行在node环境,需要先安装node.js,建议安装LTS版(稳定版),安装完成后执行两个简单的命令测试是否完全安装,在cmd面板中分别输入node -v.npm -v显示版本号代表正确安装. 1-2. npm是node包管理器,已经随node安装包一起安装,稍后会用到它.由于安装插件需要连接到国外npm服务器,可能会导致连不上或者速度慢,可以使用vpn或者设置代理解决,这里推荐另一种比较简单的解决方法,使用淘宝npm镜像. 在命令行中输入: 1 n

gulp -- 前端自动化管理工具的使用

1.gulp使用时需要安装2次,全局安装和本地安装(前提是要有nodeJS) npm install --save-dev gulp//全局安装 npm install --save-dev gulp//本地安装 跳到本地文件夹下,再安装一次 2.需要在本地建一个gulpFile.js文件 3.在gulpFile.js文件下引入第三方模块 var gulp = require("gulp"); //压缩代码模块 需本地安装 var uglify = require("gulp

gulp前端自动化环境搭建详解

1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本  npm -v 查看npm版本 选装cnpm 1.1.说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常, 如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网: "这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为  10分钟 一次以保证尽量

学习安装gulp前端自动化工具步骤流程

首先,安装所需要的插件 yo  bower gulp三个工具 npm install -g yo bower gulp 再次,安装gulp所需要的generator-gulp-webapp,这个和grunt的有个区别就多了一个gulp标识 npm install -g generator-gulp-webapp 最后一步安装gulp-webapp,注意要和grunt区分开来 yo gulp-webapp 执行完上面的步骤后,输入 gulp server后,会自动打一个浏览器窗口,如果未打开可以在

gulp 前端自动化工具的使用&amp;&amp;yarn

1.全局安装gulp          cnpm install gulp -g 2.如果需要使用gulp的时候            a.cnpm init    初始化仓库   后面加 -y b.局部安装   gulp  cnpm install gulp --save-dev --save:将保存配置信息至package.json                              -dev:保存至package.json的devDependencies节点 c.创建一个gulpfi