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 gulp-ruby-sass@1.0.1
/*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']);