gulp

全局安装gulp

npm install gulp -g

用命令行创建一个package.json文件

npm init

本地安装gulp

npm install gulp --save-dev

在项目里创建一个gulpfile.js文件

1. 在gulpfile.js文件中引入gulp,使用各个的gulp的插件
2. 在通过命令行 npm install 插件名称 --save-dev的方式引入
3. 通过在命令行中执行 gulp命令运行

var gulp = require('gulp');
var minify=require('gulp-minify'); 
var webserver=require('gulp-webserver'); //用于搭建本地服务
var concat= require('gulp-concat'); //用于合并js
var rename = require('gulp-rename');//重命名
var uglify = require('gulp-uglify');//用于混淆js代码
var sass = require('gulp-sass');//sass
var livereload= require('gulp-livereload'); //自动刷新
var px2rem = require('gulp-px2rem-plugin');//rem转化
var cssnano = require('gulp-cssnano');//压缩css代码
var scripts=[
	'./src/one.js',
	'./src/two.js',
	'./src/three.js'
]
gulp.task('concatJs',function(){
	return gulp.src(scripts)
		.pipe(uglify()) //混淆代码
		.pipe(concat('common.js')) //把数组中的所有文件合并为一个common.js文件
		.pipe(gulp.dest('./dist/js'))  //把合并好的common.js文件放入dist/src文件夹之下,如果没有dist/src文件夹,gulp会自动创建
		.pipe(rename({    //文件更名
			suffix:'.min',   //文件的后缀
			extname:'.js'  //文件的外延名
		}))
		.pipe(gulp.dest('./dist/js')) //修改完名字之后再把文件放入dist/src文件夹之下
		.pipe(livereload())   //实时监听文件的修改,自动刷新页面
		
})

gulp.task('script',function(){
	return gulp.src('client/js/**/*.js')
		.pipe(minify())  //压缩js文件
		.pipe(gulp.dest('bulid'));
});

gulp.task('css',function(){
	return gulp.src('./src/sass/index.min.css')
	.pipe(gulp.dest('./dist/css'))
})

gulp.task('sass',function(){
	return gulp.src('./src/sass/index.min.scss')
	.pipe(sass())  //先进行scss编译
	.pipe(cssnano())  //把编译完成后的代码进行压缩
	.pipe(gulp.dest('./dist/css/'))  //把编译压缩完成后的代码放发到./dist/css/文件夹下面
	.pipe(px2rem({
		'width_design':750, //设计稿宽度。默认值640
		'valid_num':6, //生成rem后的小数位数。默认值4
		'pieces':10, //将整屏切份。默认为10，相当于10rem = width_design(设计稿宽度)
		'ignore_px':[], //让部分px不在转换成rem。默认为空数组
		'ignore_selector':['.class1']  //让部分选择器不在转换为rem。默认为空数组
		}))
	.pipe(livereload())   //实时监听文件的修改,自动刷新页面
})

gulp.task('webserver',function(){
   gulp.src('./dist')
	.pipe(webserver({
		port:8787,
		open:true,
		livereload: true,
        directoryListing: false
	}))
})


//监听文件的变化
gulp.task('watch', function () {
    livereload.listen();
    
  	gulp.watch('./src/*.js',['concatJs']);
  	gulp.watch('./src/**/*.scss',['sass']);

});



gulp.task('default',['concatJs','watch','script','sass','webserver'],function(){
	
})