认识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文件修改后,没有 ...
随机推荐
- CodeForces 232E.Quick Tortoise
John Doe has a field, which is a rectangular table of size n × m. We assume that the field rows are ...
- MySQL 5.7.17绿色版安装
下载地址 :https://dev.mysql.com/downloads/mysql/ ,需要oracle帐号 下载 Windows (x86, 64-bit), ZIP Archive 是个 ...
- AForge.NET 设置摄像头分辨率
AForge.NET 老版本在预览摄像头时可通过设置DesiredFrameSize 属性,设置摄像头支持的分辨率,新版本提示已过期: 解决办法: 获取VideoCapabilities属性集合,选中 ...
- 标准C程序设计七---52
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- 四、 java循环结构
for循环结构: 格式:①初始化条件;②循环条件;③迭代条件;④循环体 for(①;②;③){ //④ } 执行过程:①-②-④-③-②-④-③-...-④-③-②,直至循环条件不满足,退出当前的循环 ...
- HYSBZ 1026: windy数(数位DP)
类型:数位DP题意:不含前导零且相邻两个数字之差至少为2的正整数被称为windy数.问[A,B]之间windy数的个数.(1 <= A <= B <= 2000000000 ) 思路 ...
- Python内置函数和匿名函数
内容回顾: 1.列表推导式 [变量(加工后的变量) for 变量 in iterable] 循环模式 [变量(加工后的变量) for 变量 in iterable if 条件] 筛选模式 生成器表达式 ...
- 作妖系列——更改spyder黑色主题
https://blog.csdn.net/bat67/article/details/83932835 For Anaconda3 users on Windows 10 : 下载安装QDarkSt ...
- SpringMVC (<context:include-filter>和<context:exclude-filter>的使用)
eg: 1.现在给定一个项目包的结构: com.yk.controller com.yk.service 2.在SpringMVC.XML有以下的配置: <!--扫描@controller注解- ...
- Tyvj——P1952 Easy
http://www.tyvj.cn/p/1952 描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是 ...