1. 全局安装gulp

    $npm install --global gulp
  2. 作为项目的开发依赖安装
    //--save-dev 开发依赖,储存在package.json的devDependencies中,如gulp,grunt
    //--save 发布之后的依赖,储存在package.json的dependencies中,如jquery,angular $ npm install --save-dev gulp
  3. 在项目下创建一个gulpfile.js文件
    var gulp = require('gulp');
    
    gulp.task('default', function() {
    // 将你的默认的任务代码放在这
    });
  4. 运行gulp
    $ gulp
    
    //运行default的task,如果单独执行task,  gulp <task> <othertask>
  5. api
    //默认的,task 将以最大的并发数执行,也就是说,gulp 会一次性运行所有的 task 并且不做任何等待。若要顺序执行,建立依赖
    var gulp = require('gulp'); // 返回一个 callback,因此系统可以知道它什么时候完成
    gulp.task('one', function(cb) {
    console.log(1);
    }); // 定义一个所依赖的 task 必须在这个 task 执行之前完成
    gulp.task('two', ['one'], function() {
    console.log(2);
    }); gulp.task('default', ['one', 'two']); //gulp.src 输出符合匹配的文件,通过.pipe执行压缩合并等操作
    //gulp.desk 能被 pipe 进来,并且将会写文件。并且重新输出所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。
    gulp.src('client/templates/*.jade')
    .pipe(jade())
    .pipe(minify())
    .pipe(gulp.dest('build/minified_templates')); //gulp.watch 监听事件并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射change 事件。 gulp.task('watch', function () {
    //监听app/assets 下的所有二级目录中的所有.less文件,发生改变,执行名为less的task文件
    gulp.watch('app/assets/**/*.less', ['less']);
    });
  6. 引入模块
    //connect静态服务器
    var connect = require("gulp-connect"); // 合并文件模块
    var concat = require('gulp-concat'); //less编译模块
    var less = require('gulp-less'); //压缩js
    var uglify = require('gulp-uglify');
    //压缩css
    var minifyCss = require('gulp-minify-css');
    //压缩html
    var minifyHtml = require('gulp-minify-html'); //项目中需要将.less文件重命名为.css var rename = require('gulp-rename'); //jshint检查js静态语法检查
    var jshint = require('gulp-jshint');

gulp 基础运用的更多相关文章

  1. gulp基础操作实践

    按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...

  2. Gulp基础

    1.什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. 2.为什么使用gulp? gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工 ...

  3. gulp基础使用总结

    gulp 安装 1 检测电脑有没有安装node 执行 $ node -v $ npm -v 如果没有安装的话,可以到https://nodejs.org/en/download/下载安装. 2 全局安 ...

  4. Gulp基础知识

    首先,我们需要了解Gulp能做些什么? 编译 sass                                        sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) ...

  5. gulp.基础

    1.安装 全局安装 npm install --global gulp 作为项目的开发依赖安装 npm install gulp --save-dev 2.在根目录下创建一个名为gulpfile.js ...

  6. gulp基础使用及进阶

    提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件 ...

  7. 【gulp】工作中的实战

    写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...

  8. Gulp真实项目用例

    包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ...

  9. gulp学习-gulpfile

    安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局安装gulp. 1 npm install --global gulp 2.其次局部安装gulp.(注: ...

随机推荐

  1. FileZilla Server 防火墙端口开启设置 windows 2008 win

    入站规则 添加21端口, 程序FileZilla server.exe 出站规则 %SystemRoot%\System32\ftp.exe

  2. CentOS SSH安装与配置

    SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议. 传 统的网络服务程序, ...

  3. 【HDOJ】3386 Final Kichiku “Lanlanshu”

    数位DP.需要注意的是需要特殊处理前导0,另外连续的==匹配,不要计重了,尽量贪心的匹配掉. /* 3886 */ #include <iostream> #include <sst ...

  4. Counting sheep...

    Counting sheep... Description: Consider an array of sheep where some sheep may be missing from their ...

  5. POJ (线段相交 最短路) The Doors

    题意: 一个正方形中有n道竖直的墙,每道墙上开两个门.求从左边中点走到右边中点的最短距离. 分析: 以起点终点和每个门的两个端点建图,如果两个点可以直接相连(即不会被墙挡住),则权值为两点间的欧几里得 ...

  6. UVa 10622 (gcd 分解质因数) Perfect P-th Powers

    题意: 对于32位有符号整数x,将其写成x = bp的形式,求p可能的最大值. 分析: 将x分解质因数,然后求所有指数的gcd即可. 对于负数还要再处理一下,负数求得的p必须是奇数才行. #inclu ...

  7. (转载)关于gcd的8题

    发现其实有关gcd的题目还是挺多的,这里根据做题顺序写出8题. [bzoj2818: Gcd] gcd(x,y)=质数, 1<=x,y<=n的对数 做这题的时候,懂得了一个非常重要的转化: ...

  8. SSH2中memcached作为hibernate二级缓存

    一.安装memcached服务端 1. 下载memcached的windows稳定版,解压放某个盘下面,比如在c:\memcached2. 在CMD下输入 "c:\memcached\mem ...

  9. date 获取昨天日期

    使用date -d 选项:  date  +"%Y%m%d" -d  "+n days"         今天的后n天日期       date  +" ...

  10. (六)学习MVC之标签a提交页面

    标签<a>如何做到与<input type="submit"/>一样有提交页面信息的效果? @using (Html.BeginForm("Log ...