欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

gulp前端自动构建工具配置详解

程序员文章站 2022-11-20 14:38:22
安装: 前提是安装了nodejs,步骤可见:点击打开链接全局安装:npm install gulp -g在项目中安装: npm install gulp --save-dev检测...

安装:

前提是安装了nodejs,步骤可见:点击打开链接全局安装:npm install gulp -g在项目中安装: npm install gulp --save-dev检测是否安装成功:gulp -v 配置:

现在自己的项目根目录下新建文件:gulpfile.js,固定名称。 在文件中引入gulp模块, var gulp = require("gulp")

安装项目需要的插件: npm install gulp-minify-css --save-dev

部分配置代码如下:

var outputDir       = 'newactivity';
var outputJSDir     = outputDir + '/js';
var outputCSSDir    = outputDir + '/css';
var outputHTMLDir    = outputDir + '/html';


var gulp = require('gulp');

var pump = require('pump');
var minify = require('gulp-minify');
var htmlmin = require('gulp-htmlmin');
var cleancss = require('gulp-clean-css');
var UglifyJS = require('gulp-uglify');

//1、压缩html目录下的代码
gulp.task('compress-html',function(){
	gulp.src('*.html')
		.pipe(htmlmin({collapseWhitespace: true}))
		.pipe(gulp.dest(outputDir))
})

//2、压缩js目录下的js文件
gulp.task('compress-js', function (cb){
	var option = {
		mangle:{
			toplevel:true,
			keep_fnames:true,
			reserved:['$','http'],
		}
	};
	pump([
	  	gulp.src('js/*.js'),
	    	UglifyJS(option),
	    	gulp.dest(outputJSDir)
		],
		cb
	);
});

//3、压缩css文件
gulp.task('compress-css', function(){
	gulp.src('css/**/*.css')
		.pipe(cleancss({compatibility: 'ie8',keepSpecialComments:'*',sourceMap: true,relativeTo:'css/'})) //保留ie以下的兼容写法
		.pipe(gulp.dest(outputCSSDir))
})

//4、复制文件
gulp.task('copy-files', function(){
	gulp.src("image/**").pipe(gulp.dest(outputDir+'/image'))
})

gulp.task("default",['copy-files','compress-html','compress-js','compress-css'])

注意:

混淆js的时候会改变变量名称,如果你有跨文件使用的变量的话,使用reserved定义好不好被混淆的变量名即可。