Gulp 简单的开发环境搭建

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174

//获取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']);