码迷,mamicode.com
首页 > 其他好文 > 详细

gulp

时间:2015-11-30 00:48:23      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:

Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

Gulp安装

全局安装:

$ npm install -g gulp 

 

1. 将安装包放在 /usr/local 下
2. 可以直接在命令行里使用

局部安装:

$ npm install gulp --save-dev

 

1. 将安装包放在 ./node_modules 下(运行npm时所在的目录)
2. 可以通过 require() 来引入本地安装的包

一般推荐全局安装。

作为项目的开发依赖(devDependencies)安装

$ npm install --save-dev gulp

 

在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require(‘gulp‘);//跟node。js相似,也是需要什么就require什么

//默认任务 gulp.task(‘default‘, function() { //这里输入默认任务的代码,function()也可以写成数组里面放需要默认执行的任务 });

运行gulp

/*全部执行(执行默认任务)*/
$ gulp
/*执行指定任务*/
$ gulp 任务名

安装gulp外挂

安装外挂:

$ npm install 外挂名

载入外挂

require(“外挂名”)

建立任务

gulp.task(‘任务名‘, function() {  
  return gulp.src(‘源路径‘)
    .pipe(gulp.dest(‘存放的路径‘))
    .pipe(minifycss())//压缩css文件
    .pipe(gulp.dest(‘dist/assets/css‘))//完成之后存放的位置
});
src:目标源路径
dest:完成之后存放的位置

看守

为了能够看守档案,并在更动发生后执行相关任务,首先需要建立一个新的任务,使用gulp.watch来看守档案:

gulp.task(‘watch‘, function() {
 
  // 看守所有.css档
  gulp.watch(‘src/*.css‘, [‘任务名‘]);
 
  // 看守所有.js档
  gulp.watch(‘src/*.js‘, [‘任务名‘]);
 
  // 看守所有图片档
  gulp.watch(‘src/*‘, [‘任务名‘]);
 
});

 

gulp

标签:

原文地址:http://www.cnblogs.com/R46W8/p/5006001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!