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) 定義任務(wù)  name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件  globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) 
//gulp.dest(path[, options]) 處理完后文件生成路徑

執(zhí)行任務(wù)

gulp testLess//執(zhí)行制定任務(wù)
gulp [default]//執(zhí)行默認(rèn)任務(wù)

打包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

靜態(tài)服務(wù)器，頁面自動刷新

目錄結(jié)構(gòu)
/path/myServer/
---node_modules
---www
---gulpfile.js
---package.json

npm install gulp-connect

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

//創(chuàng)建watch任務(wù)去檢測html文件,其定義了當(dāng)html改動之后，去調(diào)用一個Gulp的Task
gulp.task('watch', function () {
  gulp.watch(['./www/*.html'], ['html']);
});

//使用connect啟動一個Web服務(wù)器
gulp.task('connect', function () {
  connect.server({
    root: 'www',
    livereload: true
  });
});

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

//運行Gulp時，默認(rèn)的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