使用gulp构建项目架构

项目架构：

步骤：

1：

npm install gulp -g

2：

npm install gulp -save-dev

3：在项目的根目录创建gulpfile.js

将以下代码复制进去

 
 

  
  
var gulp = require("gulp");
var ejs = require("gulp-ejs");
var plumber = require("gulp-plumber");
var rename = require("gulp-rename");
var watch = require("gulp-watch");
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var del = require("del");
var sass = require("gulp-sass");
var connect = require('gulp-connect');
var livereload = require('gulp-livereload');
var htmlmin = require("gulp-htmlmin");//Html压缩


//Htmls
gulp.task('htmls', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: false,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src(["./src/views/**/*.html"])
        .pipe(htmlmin(options))
        .pipe(gulp.dest("./src/build/views"));
});

gulp.task('ejs', () => {
    return gulp.src(["./src/views_ejs/**/*.ejs", "!./src/views_ejs/public/*.ejs"])
		.pipe(plumber())
		.pipe(ejs({},{}, {ext: '.html' }))
		.pipe(gulp.dest("./src/views/"))
});
gulp.task('css', () => {
    return gulp.src('./src/css/**/*.css')      //压缩的文
		.pipe(minifycss()) //输出文件夹
		.pipe(gulp.dest('./src/build/css'))

});
gulp.task('js', () => {
    return gulp.src('./src/js/**/*.js')      //压缩的文
		.pipe(uglify()) //输出文件夹
		.pipe(gulp.dest('./src/build/js'))

});

gulp.task('sass', () => {
    return gulp.src('./src/sass/**/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest('./src/css'));

});

gulp.task('clean', function (cb) {
    del(['./src/build/js/**/*.js', './src/build/css/**/*.css', "./src/build/views/**/*.html"], cb)
});

gulp.task('webserver', function() {
    connect.server({livereload: true});
});

gulp.task('images', function () {
   return gulp.src(['./src/images/*/**.*'])
			.pipe(gulp.dest('./src/build/images'))
});

gulp.task('watch', () => {
//	var server = livereload();
	watch('./src/views_ejs/',() =>{
		gulp.start('ejs')
	});
	
	watch('./src/sass/',() =>{
		gulp.start('sass')
	});
//	gulp.watch('./src/**/*.*', function (file) {
//        server.changed(file.path);
//    });
	
});
gulp.task('build', ['clean', 'sass','css', 'js', 'htmls','images']);

gulp.task('default', ['watch','webserver'])


   
   


4、在根目录创建package.json文件

npm init
5、安装各种依赖包:

npm install gulp-ejs -save-dev
npm install gulp-plumber -save-dev
npm install gulp-rename -save-dev

npm install gulp-watch -save-dev
npm install gulp-minify-css  -save-dev
npm install gulp-uglify -save-dev
npm install del  -save-dev
npm install gulp-sass -save-dev
npm install gulp-connect -save-dev
npm install gulp-livereload  -save-dev
npm install gulp-htmlmin -save-dev

6、运行gulp