Gulp 简单的开发环境搭建

//获取gulp
//require()是 node (CommonJS)中获取模块的语法

var gulp=require(‘gulp‘);

//获取gulp-concat模块(用于合并文件):npm install --save-dev gulp-concat
var concat=require(‘gulp-concat‘);

//获取gulp-jshint(语法检查):npm install jshint
var jshint=require(‘gulp-jshint‘);

//获取gulp-uglify组件(用于压缩JS):npm install gulp-uglify
var uglify=require(‘gulp-uglify‘);

//获取minify-css模块(用于压缩CSS):npm install gulp-minify-css
var minifyCSS=require(‘gulp-minify-css‘);

//获取gulp-imagemin模块:npm instal gulp-imagemin
var imagemin=require(‘gulp-imagemin‘);

//获取gulp-less 模块:npm install gulp-less
var less=require(‘gulp-less‘);

//获取gulp-ruby-sass模块：npm install [email protected]
/*var sass=require(‘gulp-ruby-sass‘);*/

//获取gulp-sass模块：不依赖ruby环境,依赖包：node-sass
var sass=require(‘gulp-sass‘);

//获取gulp-minify-html模块:npm i gulp-minify-html
var minifyHtml=require(‘gulp-minify-html‘);

//获取gulp-autoprefixer模块:npm i gulp-autoprefixer
var autoprefixer = require(‘gulp-autoprefixer‘);

//获取gulp-watch-path模块：npm install gulp-watch-path
//var watchPath=require(‘gulp-watch-path‘);

//获取gulp-rename(文件重命名):npm install gulp-rename
var rename=require(‘gulp-rename‘);

//创建任务

// 语法检查
gulp.task(‘jshint‘, function () {
    return gulp.src(‘js/*.js‘)
        .pipe(jshint())
        .pipe(jshint.reporter(‘default‘));
});

//压缩js文件
//在命令行中使用gulp script启动此任务

gulp.task(‘script‘,function(){
	//1.找到文件
	gulp.src(‘js/*.js‘)
	//2.压缩文件
	.pipe(uglify())
    //3.压缩后另存文件
    .pipe(gulp.dest(‘dist/js‘))
});

//创建压缩css任务

gulp.task(‘css‘,function(){
	//1.找到文件
	gulp.src(‘css/*.css‘)
	//2.压缩文件
	.pipe(minifyCSS())
	//3.另存为压缩文件
	.pipe(gulp.dest(‘dist/css‘))
    //4.压缩后的文件重命名为：xx.min.css
	.pipe(rename({suffix:‘.min‘}))
	.pipe(autoprefixer())
	.pipe(minifyCSS())
	.pipe(gulp.dest(‘dist/css‘))
});

//创建压缩图片任务
//在命令行输入 gulp images 启动此任务

gulp.task(‘images‘,function(){
	//1.找到图片
	gulp.src(‘images/*.*‘)
	//2.压缩图片
	.pipe(imagemin({
		progressive:true
	}))
	//3.另存压缩后图片
	.pipe(gulp.dest(‘dist/images‘))
});

//压缩HTML文件
//在命令行输入 gulp minifyHTML 启动此任务

gulp.task(‘html‘, function () {
    gulp.src(‘html/*.html‘) // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest(‘dist/html‘));
});

//编译less
//在命令行输入 gulp less 启动此任务

gulp.task(‘less‘,function(){
	//1.找到 less 文件
	gulp.src(‘less/**.less‘)
	//2.编译为css
	.pipe(less())
	//3.另存文件
	.pipe(gulp.dest(‘dist/css‘))
	//4.重命名,并压缩
	.pipe(rename({suffix:‘.min‘}))
	.pipe(minifyCSS())
	.pipe(gulp.dest(‘dist/min/css‘))
});

//编译sass
//在命令行输入 gulp sass启动此任务

gulp.task(‘sass‘, function() {
     gulp.src(‘sass/*.scss‘)
     .pipe(sass())
     .pipe(gulp.dest(‘dist/css‘))
     .pipe(rename({suffix:‘.min‘}))
	 .pipe(minifyCSS())
	 .pipe(gulp.dest(‘dist/min/css‘))
});

//文件合并
gulp.task(‘concat‘, function () {
    gulp.src(‘js/*.js‘)  //要合并的文件
    .pipe(concat(‘all.js‘))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest(‘dist/js‘))
    .pipe(rename({suffix:‘.min‘}))
    .pipe(uglify())
    .pipe(gulp.dest(‘dist/js‘))
});

//autoprefixer,自动补全css3前缀

gulp.task(‘autoprefixer‘,function(){
	return gulp.src(‘css/*.css‘)
	.pipe(autoprefixer({
		browsers:[‘last 2 version‘],
		cascade:false
	}))
	.pipe(gulp.dest(‘dist/css‘))
})

//自动监听:当文件修改时候,自动执行script任务

//在命令行使用gulp watch 启动以下任务
gulp.task(‘watch‘,function(){
	gulp.watch(‘js/*.js‘,[‘jshint‘,‘script‘,‘concat‘]);
	gulp.watch(‘sass/*.scss‘,[‘sass‘,‘css‘,‘autoprefixer‘]);
	gulp.watch(‘css/*.css‘,[‘css‘,‘autoprefixer‘]);
	gulp.watch(‘html/*.html‘,[‘html‘]);
});

//使用gulp.task(‘default‘) 定义默认任务,即:输入 gulp script 指令时默认启动该任务
//在命令行使用 gulp 启动 script 任务 和 auto 任务
//停止自动任务：Ctrl + C
//多任务执行 gulp +回车

gulp.task(‘default‘,[‘jshint‘,‘autoprefixer‘,‘script‘,‘css‘,‘html‘,‘images‘,‘sass‘,‘less‘,‘watch‘]);