使用gulp构建项目架构

最新推荐文章于 2024-09-09 09:34:52 发布

杨ni

最新推荐文章于 2024-09-09 09:34:52 发布

阅读量588

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： ejs 架构 js

本文链接：https://blog.youkuaiyun.com/lyliyangzi/article/details/75208607

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Gulp搭建前端自动化构建流程，包括安装配置、常用插件介绍及任务定义等，帮助开发者提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目架构：

步骤：

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文件