使用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压缩//Htmlsgulp.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



 
 
  
  
阅读全文
                                             
        0        0           
	
				
	
					   
使用gulp构建项目架构
	  	   
使用gulp构建一个项目
	  	   
使用gulp构建一个项目
	  	   
使用Gulp构建前端项目
	  	   
gulp项目构建小结
	  	   
gulp构建web项目
	  	   
项目构建gulp
	  	   
gulp构建工具使用
	  	   
gulp项目构建小结(续)
	  	   
Gulp构建Angular项目实践
	  	   
前端构建工具gulp使用
	  	   
使用Gulp构建前端自动化
	  	   
前端构建工具gulp使用
	  	   
前端构建工具Gulp使用
	  	   
构建工具Gulp的使用
	  	   
gulp项目中的使用
	  	   
Gulp 自动化的项目构建工具
	  	   
Gulp构建Android项目，安装APK
	     		  
	  	   
linux安装步骤（CentOS 7.3）
	  	   
Let's Encrypt 给网站加 HTTPS
	  	   
COS多文件上传
	  	   
Linux系统下MPICH的安装、配置、HelloWorld程序演示
	  	   
java线程礼让
	  	   
使用gulp构建项目架构
	  	   
MyBatis 多对多 查询
	  	   
jQuery Ajax 实例 ($.ajax、$.post、$.get)
	  	   
文件夹不存在就创建,java
	  	   
springboot ajax post 数组 400解决办法
	  	   
MyBatis一级 二级缓存
	  	   
PHP合并和追加数组
	  	   
Android基础：网络（2）---学习笔记
	  	   
Android Studio报错:This version of Android Studio is incompatible with the Gradle Plugin used处理