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的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

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

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. 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 ...

  2. MySQL 5.7.17绿色版安装

    下载地址 :https://dev.mysql.com/downloads/mysql/   ,需要oracle帐号 下载  Windows (x86, 64-bit), ZIP Archive 是个 ...

  3. AForge.NET 设置摄像头分辨率

    AForge.NET 老版本在预览摄像头时可通过设置DesiredFrameSize 属性,设置摄像头支持的分辨率,新版本提示已过期: 解决办法: 获取VideoCapabilities属性集合,选中 ...

  4. 标准C程序设计七---52

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  5. 四、 java循环结构

    for循环结构: 格式:①初始化条件;②循环条件;③迭代条件;④循环体 for(①;②;③){ //④ } 执行过程:①-②-④-③-②-④-③-...-④-③-②,直至循环条件不满足,退出当前的循环 ...

  6. HYSBZ 1026: windy数(数位DP)

    类型:数位DP题意:不含前导零且相邻两个数字之差至少为2的正整数被称为windy数.问[A,B]之间windy数的个数.(1 <= A <= B <= 2000000000 ) 思路 ...

  7. Python内置函数和匿名函数

    内容回顾: 1.列表推导式 [变量(加工后的变量) for 变量 in iterable] 循环模式 [变量(加工后的变量) for 变量 in iterable if 条件] 筛选模式 生成器表达式 ...

  8. 作妖系列——更改spyder黑色主题

    https://blog.csdn.net/bat67/article/details/83932835 For Anaconda3 users on Windows 10 : 下载安装QDarkSt ...

  9. SpringMVC (<context:include-filter>和<context:exclude-filter>的使用)

    eg: 1.现在给定一个项目包的结构: com.yk.controller com.yk.service 2.在SpringMVC.XML有以下的配置: <!--扫描@controller注解- ...

  10. Tyvj——P1952 Easy

    http://www.tyvj.cn/p/1952 描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是 ...