gulp

全局安装

npm install --global gulp

项目中作为以来引入
(没有package.json,先 npm init)

$ npm install --save-dev gulp

使用

less生成css
gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less');

gulp.task('testLess', function() {
    gulp.src('src/less/test.less')
          .pipe(less()) 
          .pipe(gulp.dest('src/css')); 
});
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

执行任务

gulp testLess//执行制定任务
gulp [default]//执行默认任务

打包css、js

npm install gulp-mini-css
npm install gulp-uglify

var gulp = require('gulp'),
    less = require('gulp-less'),
    mincss = require('gulp-mini-css'),
    uglify = require('gulp-uglify');

var jpub_src='./src/PopUpBox';

gulp.task('testLess', function() {
    gulp.src('src/less/test.less')
          .pipe(less())
          .pipe(gulp.dest('src/css'));
});
gulp.task('mincss', function() {
    gulp.src(jpub_src+'/**/*.css')
          .pipe(mincss())
          .pipe(gulp.dest('src/css'));
});
gulp.task('minjs', function() {
    gulp.src(jpub_src+'/**/*.js')
          .pipe(uglify())
          .pipe(gulp.dest('src/js'));
});
gulp.task('watch', function () {
    gulp.watch(jpub_src+'/**/*.css',['mincss']);
    gulp.watch(jpub_src+'/**/*.js',['minjs']);
});
gulp.task('default',function(){
    gulp.run('minjs','mincss');
    gulp.run('watch');
});

gulp

静态服务器，页面自动刷新

目录结构
/path/myServer/
---node_modules
---www
---gulpfile.js
---package.json

npm install gulp-connect

//引入插件
var gulp = require('gulp');
var connect = require('gulp-connect');

//创建watch任务去检测html文件,其定义了当html改动之后，去调用一个Gulp的Task
gulp.task('watch', function () {
  gulp.watch(['./www/*.html'], ['html']);
});

//使用connect启动一个Web服务器
gulp.task('connect', function () {
  connect.server({
    root: 'www',
    livereload: true
  });
});

gulp.task('html', function () {
  gulp.src('./www/*.html')
    .pipe(connect.reload());
});

//运行Gulp时，默认的Task
gulp.task('default', ['connect', 'watch']);

---

less

    <link rel="stylesheet/less" type="text/css" href="test.less">
    <script src="less.js"></script>

@color: #4D926F;

#header {
 color: @color;
}
h2 {
 color: @color;
}

---

webpack