gulp前端自动化入门

1、从零开始搭建gulp前端自动化javascript

一、首先安装nodejscss

二、npm init 初始化 生成package.json前端

  2.1 能够选装cnpm cnpm是淘宝提供的服务 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符从新打开,安装完直接使用有可能会出现错误;java

二、定位到当前目录 cd..   d:   我在d盘新建了文件夹gulpnode

三、npm install --save-dev gulp  安装gulpnpm

四、新建gulpfile.js  须要安装npm install --save-dev gulp-less  | npm install --save-dev gulp-uglify | npm install --save-dev gulp-autoprefixerjson

var gulp = require("gulp"),
	less = require("gulp-less"),
	uglify = require("gulp-uglify"),
	autoprefixer = require("gulp-autoprefixer");

	gulp.task('testLess',function(){
		gulp.src('src/less/index.less')
		.pipe(less())
		.pipe(gulp.dest('src/css'));
	});
	//gulp.task('default',['testLess','elseTask']);
	gulp.task('jsMin',function(){
		gulp.src(['src/js/*.js'])
		.pipe(uglify())
		.pipe(gulp.dest('dist/js'));
	});
	gulp.task('testAutoFx',function(){
		gulp.src(['src/css/my.css'])
		.pipe(autoprefixer({
			browsers:['last 2 versions','Android >=4.0'],
			cascade:true,
			remove:true
		}))
		.pipe(gulp.dest('dist/css'))
	});

gulp testLessgulp

参考文章http://www.ydcss.com/less

相关文章
相关标签/搜索