gulp 基础运用

 

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');