使用Gulp搭建前端简单开发环境

刚刚学习了Gulp,使用它搭建了一个开发环境,目前项目中使用的是

less作为css开发工具

这样我们就需要如下插件

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifyHTML = require("gulp-minify-html");
var htmlreplace = require('gulp-html-replace');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var connect = require('gulp-connect');

第一步：安装nodejs

这里不复述了,百度一下一坨一坨的

第二布,安装gulp

npm install gulp --dev-save;

npm install gulp-minify-css   --dev-save;
npm install gulp-autoprefixer   --dev-save;
npm install gulp-notify  --dev-save;
npm install gulp-uglify   --dev-save;
npm install gulp-concat   --dev-save;
npm install gulp-rename   --dev-save;
npm install gulp-minify-html  --dev-save;
npm install gulp-html-replace   --dev-save;
npm install gulp-less   --dev-save;
npm install gulp-connect --dev-save;

第四步：创建gulpfile.js

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifyHTML = require("gulp-minify-html");
var htmlreplace = require('gulp-html-replace');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var connect = require('gulp-connect');

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

gulp.task('html', function () {
  gulp.src('app/*.*')
  .pipe(connect.reload())
  .pipe(notify({message:'reload master'})); // 输出到目录;
});


gulp.task('build-less', function () {
    gulp.src(['./app/assert/less/**/*.less'])
      .pipe(concat('less.css')) // 将所有less文件合并到less.css
      .pipe(less())
      .pipe(autoprefixer('last 15 version','ie 8')) // autoprefixer配置
      .pipe(gulp.dest('./app/assert/css'))
      .pipe(notify({message:'less is done,master'}));; // 输出到目录
});

gulp.task('html-replace',function() {
  var opts = {comments:false,spare:false,quotes:true};
  return gulp.src('app/html/**/*.html')
    .pipe(htmlreplace({
        'css': 'css/all.min.css',
        'js': 'js/all.min.js'
    }))  
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest('app/dest/html'));
});

gulp.task('css',function(){
	return gulp.src('app/assert/css/less.css')
	.pipe(autoprefixer('last 15 version','ie 8'))
	.pipe(minifycss())
	.pipe(gulp.dest('app/dest/css/min'))
	.pipe(notify({message:'all css done,master'}));
});

gulp.task('minifyjs',function(){
	return gulp.src('app/assert/js/*.js')
	.pipe(concat('all.js'))
	.pipe(gulp.dest('app/dest/js/min'))
	.pipe(rename({suffix:'.min'}))
	.pipe(uglify())
	.pipe(gulp.dest('app/dest/js/min'))
	.pipe(notify({message:'js is done,master'}));
});

//创建watch任务去检测html文件,其定义了当html改动之后，去调用一个Gulp的Task
gulp.task('watch', function () {
  gulp.watch(['./app/**/*.*'], ['allFiles']);
  gulp.watch([
	 	'app/assert/less/**/*.less', 
	 	'app/assert/css/**/*.css',
	 	'app/assert/js/**/*.js',
	 	'app/html/**/*.html',
	 	], ['build-less','css','minifyjs','html-replace']);

});

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

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

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