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. 关于VBA和“网抓”的一些贴

    https://zhuanlan.zhihu.com/p/20701359 使用Excel+VBA对网页进行操作 http://club.excelhome.net/thread-1215914-1- ...

  2. Ubuntu12.04 64bit版本下载Android源码完整教程

    首先去官网http://source.android.com/source/initializing.html可以看到完整的安装教程.不过一般情况下,按照这个教程是无法一步到位的,因为中途肯定会遇到很 ...

  3. bzoj 4007 树形dp

    题目大意 脸哥最近来到了一个神奇的王国,王国里的公民每个公民有两个下属或者没有下属,这种关系刚好组成一个 n 层的完全二叉树.公民 i 的下属是 2 * i 和 2 * i +1.最下层的公民即叶子节 ...

  4. Linux 之 MySQL主从同步

    MySQL主从同步 参考教程:[千峰教育] 1.架设两个虚拟服务器,都安装好mysql. 2.关闭防火墙和Selinux. service iptables stop setenforce 0 3.修 ...

  5. Yii CDbCriteria的常用方法总结

    查看代码   打印 01 $criteria=new CDbCriteria; 02 $criteria->addCondition("id=1");//查询条件,即wher ...

  6. github每次push提交都要输入账号密码

    问题产生的原因是在克隆的时候使用的是https的方式或者用一些特殊的指令来克隆的github项目源,如 golang里的go get github.com/...... 没次提交push的时候都会提示 ...

  7. Java 添加播放MIDI音乐

      Java 在多媒体处理方面的确优势不大,但是我们在程序中有些时候又需要一些音乐. 如果播放的音乐是wav等波形音频文件,又很大的话,所以背景音乐最好就是MIDI了. 网上很多播放MIDI的教程都是 ...

  8. Codeforces 696E ...Wait for it...(树链剖分)

    题目链接  ...Wait for it... 考虑树链剖分. 对于树上的每个点开一个set,记录当前该节点上所有的girls. 每个节点初始的权值为set中的最小值. 询问的时候每次在路径上寻找最小 ...

  9. Network | parity bit

    奇偶校验位是一个表示给定位数的二进制数中1的个数是奇数还是偶数的二进制数.奇偶校验位是最简单的错误检测码. A parity bit, or check bit is a bit added to t ...

  10. spring版本不兼容JDK问题

    在实验书上Spring项目的时候出现一个问题,导入包和使用注释的时候eclipse出现报错. 导入包报错:The import org cannot be resolved 注释报错:componen ...