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;
}
