认识Gulp
gulp详细入门教程:http://www.ydcss.com/archives/18
安装gulp
前提:已经安装node.js、npm
$ npm install gulp --save-dev
gulp-sass:将scss编译成css的gulp插件
安装gulp-sass
$ npm install gulp-sass --save-dev
新建package.js文件
基于node.js项目必不可少的配置文件。
{
"name": "gulpText",
"version": "3.0.0",
"scripts": {
"init": "npm install"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^2.3.2",
}
}
新建gulpfile.js文件
var gulp = require('gulp');
var sass=require('gulp-sass'); gulp.task('testSass',function(){
gulp.src('distn/styles/main.scss') //该任务针对的文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
}); gulp.task('default',['testSass']);
运行gulp
右键gulpfile.js文件,选择”Show Gulp Tasks”,打开Gulp窗口,双击需要运行的任务即可。
gulp-concat:合并js文件
安装gulp-concat插件
$ npm install gulp-concat --save-dev
var concat = require('gulp-concat');
gulp.task('testVendor', function () {
gulp.src(['client/vendor/jquery.min.js', 'client/vendor/angular.min.js'])
.pipe(concat('vendor2.js'))
.pipe(gulp.dest('src/js'));
}); gulp.task('default', ['testVendor']);
认识Gulp的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- gulp初学
原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js 配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...
- gulp批量打包文件并提取公共文件
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
随机推荐
- 关于VBA和“网抓”的一些贴
https://zhuanlan.zhihu.com/p/20701359 使用Excel+VBA对网页进行操作 http://club.excelhome.net/thread-1215914-1- ...
- Ubuntu12.04 64bit版本下载Android源码完整教程
首先去官网http://source.android.com/source/initializing.html可以看到完整的安装教程.不过一般情况下,按照这个教程是无法一步到位的,因为中途肯定会遇到很 ...
- bzoj 4007 树形dp
题目大意 脸哥最近来到了一个神奇的王国,王国里的公民每个公民有两个下属或者没有下属,这种关系刚好组成一个 n 层的完全二叉树.公民 i 的下属是 2 * i 和 2 * i +1.最下层的公民即叶子节 ...
- Linux 之 MySQL主从同步
MySQL主从同步 参考教程:[千峰教育] 1.架设两个虚拟服务器,都安装好mysql. 2.关闭防火墙和Selinux. service iptables stop setenforce 0 3.修 ...
- Yii CDbCriteria的常用方法总结
查看代码 打印 01 $criteria=new CDbCriteria; 02 $criteria->addCondition("id=1");//查询条件,即wher ...
- github每次push提交都要输入账号密码
问题产生的原因是在克隆的时候使用的是https的方式或者用一些特殊的指令来克隆的github项目源,如 golang里的go get github.com/...... 没次提交push的时候都会提示 ...
- Java 添加播放MIDI音乐
Java 在多媒体处理方面的确优势不大,但是我们在程序中有些时候又需要一些音乐. 如果播放的音乐是wav等波形音频文件,又很大的话,所以背景音乐最好就是MIDI了. 网上很多播放MIDI的教程都是 ...
- Codeforces 696E ...Wait for it...(树链剖分)
题目链接 ...Wait for it... 考虑树链剖分. 对于树上的每个点开一个set,记录当前该节点上所有的girls. 每个节点初始的权值为set中的最小值. 询问的时候每次在路径上寻找最小 ...
- Network | parity bit
奇偶校验位是一个表示给定位数的二进制数中1的个数是奇数还是偶数的二进制数.奇偶校验位是最简单的错误检测码. A parity bit, or check bit is a bit added to t ...
- spring版本不兼容JDK问题
在实验书上Spring项目的时候出现一个问题,导入包和使用注释的时候eclipse出现报错. 导入包报错:The import org cannot be resolved 注释报错:componen ...