gulp前端自动化入门
一、从零开始搭建gulp前端自动化
1、首先安装nodejs
2、npm init 初始化 生成package.json
2.1 可以选装cnpm cnpm是淘宝提供的服务 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org; 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
2、定位到当前目录 cd.. d: 我在d盘新建了文件夹gulp
3、npm install --save-dev gulp 安装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'))
});
gulp testLess
参考文章http://www.ydcss.com/
gulp前端自动化入门的更多相关文章
- gulp 前端自动化工具
一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...
- gulp前端自动化工作流
gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 ...
- gulp前端自动化构建工具入门篇
现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...
- gulp前端自动化构建工具新手入门篇
很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...
- gulp前端自动化构建并上传oss
前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gu ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
- gulp前端自动化构建工具
博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...
- gulp --- 前端自动化构建工具
目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安 ...
- gulp前端自动化构建工具使用
(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...
随机推荐
- linux文件或文件夹常见操作
创建文件夹 mkdir [-p] DirName 在工作目录下,建立一个名为 A 新的子目录 : mkdir A 在工作目录下的 B目录中,建立一个名为 T 的子目录: 若 B 目录不存在, ...
- 01_7_Struts_用Action的属性接收参数
01_7_Struts_用Action的属性接收参数 1. 配置struts.xml文件 <package name="user" namespace="/user ...
- sqlserver的实例名忘记了
电脑图标右击/管理/服务和应用程序/服务 也可以直接services.msc打开 打开服务,找到sqlserver的服务,这个服务括号中的名称就是实例名了,但是要加上localhost,也就是loca ...
- 【线段树 泰勒展开】Codechef April Challenge 2018 Chef at the Food Fair
第一次写泰勒展开:本地和CC差距好大 题目大意 大厨住的城市里办了一场美食节.一条街上开设了$N$个摊位,编号为$1∼N$.这天开始时,第$i$个摊位的食物会导致食物中毒的概率是$P_i$.在这一天中 ...
- Linux菜鸟起飞之路【八】文本编辑器
在Linux中,文本编辑器有两个,VI和VIM.这两个编辑器用法差不多,但vim是vi的升级版,所以功能更强大一些. vim编辑器一共有三种模式,命令行模式.编辑模式和扩展模式. 进入vim界面,首先 ...
- Python模块(三)(正则,re,模块与包)
1. 正则表达式 匹配字符串 元字符 . 除了换行 \w 数字, 字母, 下划线 \d 数字 \s 空白符 \n 换行符 \t 制表符 \b 单词的边界 \W \D \S 非xxx [ ...
- 用Python对微信好友进行简单统计分析,获取好友的基本信息!
早些日子有人问我我的微信里面有一共多少朋友,我就随后拉倒了通讯录最下面就找到了微信一共有多少位好友.然后他又问我,这里面你认识多少人?这一句话问的我很无语.一千多个好友我真的不知道认识的人有多少. ...
- vagrant 安装ubuntu12.04 64 bit
1 下载用于ubuntu 12.04 用于vagrant的镜像,虚拟机是virtualbox $ wget http://files.vagrantup.com/precise64.box jb@e3 ...
- Python动态属性和特性(一)
在Python中,数据的属性和处理数据的方法统称为属性.其实,方式只是可调用的属性.除了这二者之外,我们还可以创建特性(property),在不改变类接口的前提下,使用存取方法(即读取值和设置值方法) ...
- electron 安装
1.从网上下载的是nodejs的v0.10.42版本的安装文件,安装node-v0.10.42-x86.msi都使用默认安装,安装完成后会安装在C:\Program Files\nodejs\目录下, ...