The blog from lkiarest

blog's People

Contributors

Watchers

blog's Issues

基本的gulp配置

为了不用每次写一些小页面的时候都要重新配一把，保存一份待复用。

gulpfile.js

var path = require('path')
var gulp = require('gulp')
var rename = require("gulp-rename")
var cleanCSS = require('gulp-clean-css')
var less = require('gulp-less')
var LessAutoprefix = require('less-plugin-autoprefix')
var autoprefix = new LessAutoprefix({ browsers: ['>5%'] })
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('style', function(cb) {
  return gulp.src('style/main.less')
    .pipe(less({
      paths: [path.join(__dirname, 'less', 'includes')],
      plugins: [autoprefix]
    }))
    .pipe(cleanCSS())
    .pipe(rename('index.min.css'))
    .pipe(gulp.dest('./dist/'))
})

gulp.task('script', function(cb) {
  return gulp.src(['script/flexible.js', 'script/main.js'])
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/'))
})

gulp.task('watch', function(cb) {
  gulp.watch('style/main.less', ['style'])
  gulp.watch('script/main.js', ['script'])
})

gulp.task('default', ['style', 'script', 'watch'])

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "test page",
  "main": "index.js",
  "author": "qintx",
  "scripts": {
    "build": "gulp"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.9.0",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.2",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "less-plugin-autoprefix": "^1.5.1"
  }
}