前端构建工具gulp配置

一、创建node环境

1、下载并安装nodejs，download；

2、全局安装gulp

npm install gulp -g
           

3、本地创建一个新文件夹，用于gulp项目；

二、当前文件夹根目录下创建package.json 文件，并安装依赖

1、初始化生成package.json文件

npm init //自行设置配置项
npm init -y //生成的默认的配置项
           

2、安装一下gulp依赖（也可直接复制到package.json文件中）

npm install //安装一下依赖
cnpm install //推荐-利用淘宝镜像安装依赖会很快
           

淘宝镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
           

gulp相关依赖

devDependencies": {
    "autoprefixer": "^7.1.4",
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0",
    "gulp-clean-css": "^3.9.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-file-include": "^2.2.2",
    "gulp-imagemin": "^7.1.0",
    "gulp-less": "^4.0.1",
    "gulp-postcss": "^7.0.0",
    "gulp-px3rem": "^0.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-uglify": "^3.0.0",
    "http-proxy-middleware": "^0.17.4",
    "uglify-es": "^3.1.3"
  }
           

三、当前文件根目录下创建gulpfile.js文件

var gulp = require('gulp');
var connect = require('gulp-connect');
var fileinclude  = require('gulp-file-include');
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var imagemin = require('gulp-imagemin');
var cleanCss = require('gulp-clean-css');
var autoprefixer = require('autoprefixer');
var postCss = require('gulp-postcss');
var px2rem = require('gulp-px3rem');
var proxy = require('http-proxy-middleware');

// 起服务
gulp.task('connect', function() {
	connect.server({
		root: 'dist',
		livereload: true,
		port: 9000,
    middleware: function(connect, opt) {
		   return [
			    proxy('/api',  {
				    target: 'http://xxxxxxxx',//接口地址
				    changeOrigin:true
			   	})
		   ]
	   }
	});
});

// html文件
gulp.task('html', function() {
	gulp.src('./src/html/*.html')
		.pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
        }))
		.pipe(connect.reload())
		.pipe(gulp.dest('./dist'));
});

// css文件
gulp.task('less', ['html'], function() {
	gulp.src('./src/css/*.less')
		.pipe(less())
		.pipe(postCss([autoprefixer({browsers: ['last 2 versions']})]))
		.pipe(px2rem({
		  baseDpr: 2,
		  threeVersion: false,
		  remVersion: true,
		  remUnit: 46.875,
		  remPrecision: 6
		}))
		.pipe(cleanCss())
    	.pipe(connect.reload())
		.pipe(gulp.dest('./dist/css'))
		
});

// js文件
gulp.task('js',['html'] , function () {
	gulp.src('./src/js/*.js')
		.pipe(sourcemaps.init())
		.pipe(babel({
			presets: ['env']
		}))
		.pipe(uglify())
		.pipe(connect.reload())
		.pipe(gulp.dest('./dist/js'))
});

// 图片
gulp.task('images',['html'], function () {
	gulp.src('./src/images/*.*')
	.pipe(imagemin())
    .pipe(connect.reload())
		.pipe(gulp.dest('./dist/images'));
})

// libs文件(静态文件)
gulp.task('libsCSS', function() {
	gulp.src('./libs/css/*.css')
		.pipe(connect.reload())
		.pipe(gulp.dest('./dist/libs/css'));
});
gulp.task('libsJS', function() {
	gulp.src('./libs/js/*.js')
		.pipe(connect.reload())
		.pipe(gulp.dest('./dist/libs/js'));
});
gulp.task('libsIMG', function() {
	gulp.src('./libs/images/*.*')
		.pipe(connect.reload())
		.pipe(gulp.dest('./dist/libs/images'));
});
gulp.task('libsFONT', function() {
	gulp.src('./libs/font/*.*')
		.pipe(connect.reload())
		.pipe(gulp.dest('./dist/libs/font'));
});

// 监控
gulp.task('watch', function() {
	gulp.watch('./src/components/*.html', ['html']);

	gulp.watch(['./src/html/*.html'], ['html']);

	gulp.watch(['./src/js/*.js'], ['js']);

	gulp.watch(['./src/css/*.less'], ['less'])

	gulp.watch(['./src/images/*.*'], ['images']);

	gulp.watch(['./libs/css/*.css*'], ['libsCSS']);

	gulp.watch(['./libs/js/*.js*'], ['libsJS']);

	gulp.watch(['./libs/images/*.*'], ['libsIMG']);

	gulp.watch(['./libs/font/*.*'], ['libsFONT']);

});

// 默认任务
gulp.task('default', ['connect', 'watch', 'js', 'less', 'images', 'libsCSS', 'libsJS', 'libsIMG', 'libsFONT']);
           

四、一切就绪执行gulp命令

1、项目目录结构(下图)

2、最后一部，执行gulp命令，文件会打包到dist文件中

五、END

以上就是简单的gulpx构建方式，有哪些不足欢迎大神们指点；

参考:https://www.cnblogs.com/changzhenan/p/8329864.html