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组件及打包文件路径和打包任 ...
随机推荐
- 接口的定义——默认加public abstract默认全局常量;与继承不同,子类可以同时实现多个接口;抽象类实现接口;接口继承接口
一. 接口的定义 接口中定义的方法,全部都为抽象方法,默认加public abstract 接口中定义的变量,全部为全局常量,默认加public static final 二.与继承不同,子类可以同时 ...
- sql 经典加强巩固练习题
由于本人需要加强巩固一下数据库知识,就搜罗了一些题目来练习,感觉不错,故分享一下资源难度层度依次上升这50道里面自认为应该没有太多错误,而且尽可能使用了最简单或是最直接的查询,有多种不相上下解法的题目 ...
- 【转】关于“using namespace std”
对于一个存在着标准输入输出的C++控制台程序,一般会在#include <iostream>的下一行发现一句话,using namespace std.这句话其实就表示了所有的标准库函数都 ...
- A. Vitya in the Countryside
A. Vitya in the Countryside time limit per test 1 second memory limit per test 256 megabytes input s ...
- Mycat高可用解决方案二(主从复制)
Mycat高可用解决方案二(主从复制) 系统部署规划 名称 IP 主机名称 用户名/密码 配置 mysql主节点 192.168.199.110 mysql-01 root/hadoop 2核/2G ...
- Python基础(五)——闭包与lambda的结合
(1)变量的域 要了解闭包需要先了解变量的域,也就是变量在哪一段“上下文”是有效的(类似局部变量和全局变量的区别),举一个很简单的例子.(例子不重要,就是涉及闭包就要时刻关注这个域) def test ...
- JAVA基础篇—接口实现动态创建对象
Scanner在控制台输入内容 package com.Fruit; public interface Fruit {//提供接口 } package com.Fruit; public class ...
- 合肥工业大学宣城校区大学生创新创业训练项目申报书:“基于Spark平台的人工智能知识的知识图谱构建”
- 《Scrum实战》第1次课课后任务
1.必做任务:从知行角度总结T平台 从知行角度总结T平台 头(知识,学习) 做得好的 宣贯会 引入敏捷思想 敏捷宣言 敏捷原则 质量风险前移原则 引入最佳实践 包括了XP的大部分实践 不足 项目管理框 ...
- rocketmq源码分析3-consumer消息获取
使用rocketmq的大体消息发送过程如下: 在前面已经分析过MQ的broker接收生产者客户端发过来的消息的过程,此文主要讲述订阅者获取消息的过程,或者说broker是怎样将消息传递给消费者客户端的 ...