一、从零开始搭建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前端自动化入门的更多相关文章

  1. gulp 前端自动化工具

    一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...

  2. gulp前端自动化工作流

    gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 ...

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

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  4. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  5. gulp前端自动化构建并上传oss

    前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gu ...

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

    https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...

  7. gulp前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

  8. gulp --- 前端自动化构建工具

    目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安 ...

  9. gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

随机推荐

  1. MySql下最好用的数据库管理工具是哪个

    MySql下最好用的数据库管理工具是哪个? 维基上有个很全的列表: https://en.wikipedia.org/wiki/Comparison_of_database_tools   1. ph ...

  2. 对O(logN)复杂度的推导

    之前一直对O(logN)这个复杂度如何推导出的存在疑问,这段时间看了一些算法相关的内容,正好看到这个问题,大略研究了一下算是基本解答了我的疑惑:现记录如下 假设有一棵高为H的满二叉树,则它的节点共有N ...

  3. 如何使用jmeter做接口测试

    1.传参:key=value形式 2.传参:json格式 3.jmeter上传文件 4.jmeter传cookie 或者使用 HTTP Cookie管理器

  4. OpenCV中图像的BGR格式及Img对象的属性说明

    1. 图像的BGR格式说明 OpenCV中图像读入的数据格式是numpy的ndarray数据格式.是BGR格式,取值范围是[0,255]. 如下图所示,分为三个维度: 第一维度:Height 高度,对 ...

  5. python3通过Beautif和XPath分别爬取“小猪短租-北京”租房信息,并对比时间效率(附源代码)

    爬虫思路分析: 1. 观察小猪短租(北京)的网页 首页:http://www.xiaozhu.com/?utm_source=baidu&utm_medium=cpc&utm_term ...

  6. 【LeetCode】Linked List Cycle II(环形链表 II)

    这是LeetCode里的第142道题. 题目要求: 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 说明:不允许修改给定的链表. 进阶:你是否可以不用额外空间解决此题? ...

  7. selenium2常用API介绍

    我们模拟web操作都是基于元素来操作的,我们首先要先确定元素,然后这个元素下对应的方法就可以看WebElement的方法. 1.点击操作 WebElement button=driver.findEl ...

  8. dubbo与zk注册中心如何对接,如何做到服务自动发现

    先看下consumer端发起调用时的链路流程: +---------------------------+ +---------------------------+ +--------------- ...

  9. selenium - 下拉框操作

    # 9. 下拉框操作# (1)等待下拉列表和下拉列表中值存在# (2)在下拉列表中选择一个值 # 三种方式# A. 获取所有的下拉列表值,然后用循环去匹配相同的值 select_by_index(下标 ...

  10. doc下设置永久环境变量的好方法

    http://www-2w.blog.163.com/blog/static/97931518201021211123267/ 需要查看命令具体实现:setx machine “%path%”. 配置 ...