gulp

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外挂

• 编译Sass (gulp-ruby-sass)
• Autoprefixer (gulp-autoprefixer)
• 缩小化(minify)CSS (gulp-minify-css)
• JSHint (gulp-jshint)
• 拼接 (gulp-concat)
• 丑化(Uglify) (gulp-uglify)
• 图片压缩 (gulp-imagemin)
• 即时重整(LiveReload) (gulp-livereload)
• 清理档案 (gulp-clean)
• 图片快取，只有更改过得图片会进行压缩 (gulp-cache)
• 更动通知 (gulp-notify)

安装外挂：

$ 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/*', ['任务名']);
 
});