(二)用less+gulp+requireJs 搭建项目(gulp)
gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~
首先去node官网下载安装包
1.新建项目文件夹 在目录下shift+右键打开命令行工具;下图表示node已经装好
2.现在想要做这样一个功能
如上图:
button.less中的颜色依赖于color.less
需要实现:
将两个less文件合并,而且生成css文件到css文件夹中:
新建文件index.less,合并两个less文件
这时候就要用到gulp
3.安装gulp
npm install --save-dev gulp
安装完成后根目录下会多出一个文件夹--node_modules 里面是node安装的模块,然后查看gulp 的版本号 说明安装成功
另外,还需要安装一些其他的包
npm install --save-dev gulp-less//解析less npm install --save-dev gulp-autoprefixer//兼容浏览器 npm install --save-dev gulp-minify-css//压缩css npm install --save-dev gulp-rename//文件+后缀
3.接下来需要一个配置文件gulpfile.js
,这个是必须要的,目的就是 告诉后台用什么解析less文件,生成的css放在哪里
gulpfile.js:
var gulp = require('gulp'),
less = require('gulp-less'),
prefix = require('gulp-autoprefixer'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'); gulp.task('Less', function (done) {
gulp.src('less/index.less')//需要编译的less文件路径
.pipe(less())//编译
.pipe(prefix(['last 4 versions'], { cascade: true }))
.pipe(minifyCss({
keepSpecialComments: ,//保留所有特殊前缀
compatibility:'ie7'//保留ie7及以下兼容写法
}))
.pipe(rename({ extname: '.min.css' }))//后缀
.pipe(gulp.dest('css/index.css'))//生成目录
.on('end', done);//结束
});
这个文件的作用是,创建一个“Less”任务,将index下的index.less文件解析 ,压缩 生成到 css下
4.接下来需要输入执行”Less”任务
gulp Less
上图表示编译成功,此时css下已经生成css文件,并且已经压缩
如下图:
5.接下来 还没完 因为这么写 你每次修改less文件都要执行一次“Less”任务才能完成编译
我们需要自动监听less文件,只要文件被修改就执行‘Less’任务,gulp有的watch()函数可以完成这种需求
在配置文件下添加如下代码:
gulp.task('watch', function () {
gulp.watch('less/*.less', ['Less']); //当有less文件发生改变时,调用Less任务
});
这样我们只要执行“watch”任务就可以一直监听less文件了
gulp watch
这样当你修改less文件时,gulp会为你自动编译!!!
快去试试吧~~~
(二)用less+gulp+requireJs 搭建项目(gulp)的更多相关文章
- (一)用less+gulp+requireJs 搭建项目(了解less)
项目完结 做个总结: 公司网站重构,整站都需要重写,终于有机会接触下 less,gulp和requireJs,因为以前的工作就是写几个活动页,并没有机会用这些工具,废话不多说,先看下完成后的项目目录: ...
- (三)用less+gulp+requireJs 搭建项目(requireJs)
首先我想说下我在写js时经常遇到的问题,尤其是很大的项目: 1.我一般会把各个功能分块写在各个js文件中: 比如弹出框: dialog.js $(document).ready(function(){ ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- gulp环境搭建,gulp入门教程
gulp常用地址: gulp官方网址:http://gulpjs.com gulp插件地址:http://gulpjs.com/plugins gulp 官方API:https://github.co ...
- Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- vue-cli webpack 快速搭建项目
一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于web ...
- 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目
环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...
- gulp自动化部署:gulp发布express项目(二)
原文:https://my.oschina.net/songzhu/blog/610337 一.服务器准备 服务器ip地址为:172.16.70.174 1.安装 Node.js 参考:http:// ...
随机推荐
- 201771010113 李婷华 《面向对象程序设计(Java)》第十三周总结
一.理论知识部分 第十一章 事件处理 事件源 (event source):能够产生事件的对象都可 以成为事件源 ,如文本框 .按钮等 .一个事件源是一个能够注册监听器并向发送事件对象的对象. 监听器 ...
- pyhanlp安装教程
1.hanlp简介 HanLP是由一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环境中的应用.HanLP具备功能完善.性能高效.架构清晰.语料时新.可自定义的特点. Hanlp具有 ...
- ASP.Net Core中使用Swagger
我们先简单介绍下什么是Swagger,主要是用来干嘛?? 在Swagger诞生之前,我们通常在开发接口的过程中,需要前后端共同维护一个接口文档,然后大家按照接口文档的规范进行对接.接口文档俨然成了接口 ...
- scala 中 Any、AnyRef、Object、AnyVal 关系
Any,是 scala 中的抽象类,不能实例化 AnyRef 继承于 Any,它是一个 trait AnyVal 继承于 Any,它是一个抽象类,目的是消除基本类型,scala中只有引用类型,仅此作用 ...
- vue-cli中浏览器图标的配置
在VUE全家桶项目里面,这里给大家提供了2种方案,进行浏览器图标的配置. a):先把图片准备好,放在static文件夹下,再找到根目录下的index.html文件,并打开,在HTML文档的<he ...
- quartus II Warning 好的时序是设计出来的,不是约束出来的
一.Warning (15714): Some pins have incomplete I/O assignments. Refer to the I/O Assignment Warnings r ...
- NoSQL之一:Memcached
一.NoSQL简介 NoSQL并不是No SQL(不再需要SQL),而是指Not Only SQL(不仅仅只有SQL).NoSQL并不是用来替代关系型数据库的,而是在某些使用关系型数据库不合适的场景中 ...
- sqli-labs之Page-3
第三十八关:堆叠注入 $sql="SELECT * FROM users WHERE id='$id' LIMIT 0,1"; /* execute multi query */ ...
- Python-实现sign签名接口校
前言 在之前的随笔中,我们已经学过了如何使用使用JMeter和Postman实现sign签名接口校验的接口测试,今天我们来学习一下如何写Python脚本实现签名接口的接口测试. 签名接口: 地址: h ...
- 智能制造:数字化协同技术在BIW焊装产线的应用
随着汽车工业的发展,如何利用数字化技术提高整车制造水平,已经成为各厂商亟待解决的问题.通过数字化工厂系统的应用使得白车身整车项目前期工艺设计.生产线规划质量有了显著提升,数字化工厂已经成为现代焊装生产 ...