gulp(1) 的使用

1.安装node.js
2.全局安装gulp.js
npm install gulp -g
3.在项目本地根目录再安装(通过黑窗口安装)npm install --save-dev gulp/ 或者 npm install gulp,

项目本地会自动生成package.json 配置文件

4.在项目根目录创建gulpfile.js文件
5,在gulpfile.js中写
var gulp = require('gulp');  //引入gulp组件

/*引入文件合并插件*/
var concat = require('gulp-concat');

/*引入文件压缩插件*/
var uglify =require('gulp-uglify')

//默认任务  可以一次性执行多个任务
gulp.task('default', function() {
  console.log("创建的第一个任务")
});

gulp.task('hellow1', function() {
  console.log("创建的第一个任务")
});
gulp.task('hellow2', function() {
  console.log("创建的第一个任务")
});
gulp.task('hellow3', function() {
  console.log("创建的第一个任务")
});

gulp.task('default', ['hellow1','hellow2','hellow3'],function(){
	console.log("执行了三个任务")
})

 执行 gulp 即可       执行了三个任务

//文件复制粘贴实例
gulp.task('copy-files', function() {
  //去到目标路径下，执行拷贝
  //去道对应的路径下，执行粘贴
  //src 获得资源
  //将文件写入对应的路径
  gulp.src(['js/test.js','js/test1.js'])
  .pipe(gulp/dest('js-finish'))
  .pipe(gulp/dest('js-test'));   //可以多次复制
  	执行gulp copy-files 即可粘贴到js-finish中

});

//合并
gulp.task('concat-js',function(){
	gulp.src(['js/*.js'])  //*表示获得js目录下所有js文件
	.pipe(concat('index.js'))
	.pipe(gulp.dest('dist'));
})
//执行 gulp concat-js

//压缩
gulp.task('uglify-js',function(){
	gulp.src(['js/*.js'])  //*表示获得js目录下所有js文件
	.pipe(concat('index.js'))
	.pile(uglify())    //压缩
	.pipe(gulp.dest('index.js'));
})

//执行 gulp uglify-js  自动压缩并合并到index.js中

例如
//创建任务
gulp.task('hello',function(){
	console.log("创建的第一个任务")
})

//执行gulp hello
 输出结果  （ 创建的第一个任务）

 实例
 //js文件合并
gulp.task('concat-js',function(){
	gulp.src(['js/flexible_css.debug.js','js/flexible.debug.js','js/swiper.min.js','js/up.js'])
	.pipe(concat('index.js'))
	.pipe(gulp.dest('dist'));
})

//css 文件合并
gulp.task('concat-css',function(){
	gulp.src(['css/common.css','css/swiper.min.css','css/index.css'])
	.pipe(concat('index.css'))
	.pipe(gulp.dest('dist'));
})

------------------------------------------------------------------------------------------
在项目本地路径下
执行
1.
npm init

安装gulp组件
npm install gulp --save-dev

npm install 

安装gulp插件
webserver
npm install gulp-webserver

npm install gulp-uglify      //文件压缩
npm install gulp-minify-css  //压缩css
npm install gulp-rename		//文件重命名
npm install gulp-concat    //合并文件

------实例二-------------------------------------------

var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify =require('gulp-uglify'),
minify =require('gulp-minify-css'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin');

//压缩合并js
gulp.task('concat-js',function(){
gulp.src(['js/*.js']) //*表示获得js目录下所有js文件
.pipe(concat('index.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
})

//压缩合并 添加前缀 css
gulp.task('concat-css',function(){
gulp.src(['css/*.css']) //*表示获得js目录下所有js文件
.pipe(concat('index.min.css'))
.pipe(autoprefixer({
cascade: true, //是否美化属性值
remove:true //移除不必要的前缀
}))
.pipe(minify())
.pipe(gulp.dest('dist'));
})

//压缩图片
gulp.task('imgmin',function(){
gulp.src('img/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('imgs'));
})

---------------------------------------前缀说明--------------------------------------------------------