gulp的安装与项目上传

gulp的安装与项目上传

gulp安装

步骤：

1.安装全局gulp和局部gulp

• npm install -g gulp //安装全局的gulp
• npm install gulp --save-dev //(新建目录---安装到项目目录下安装局部gulp)

2.安装下载node_moudel模块包

• npm i

3.初始化生成package.json文件

• npm init -y

3.gulp插件安装（编译/压缩/合并/即时刷新/）

• npm install gulp-jshint --save-dev //js检查语法错误
• npm install gulp-concat --save-dev //合并js
• npm install gulp-uglify --save-dev //压缩js
• npm install gulp-rename --save-dev //重命名
• npm install gulp-imagemin --save-dev //图片压缩注意只能是PNG格式的图片
• npm install gulp-sass --save-dev //sass编译插件
• npm install gulp-minify-html gulp-minify-css --save-dev //压缩html和css

4.项目的上传

• 首先在项目目录下创建一个gulpflie.js文件
• 在gulpfile.js文件中编写如下代码：

const gulp = require('gulp'); //加载gulp插件
const gulpsass = require('gulp-sass'); //编译sass
const html = require('gulp-minify-html'); //压缩html
const concat = require('gulp-concat'); //合并
const uglify = require('gulp-uglify'); //压缩
const rename = require('gulp-rename'); //重命名
const watch = require('gulp-watch'); //添加此插件进行监听
const imagemin = require('gulp-imagemin'); //图片压缩插件

//gulp对象下面的方法
//1.task：新建任务。
//2.src:引入文件的路径
//3.dest:输出路径
//4.watch:监听
//5.pipe:流

**注意要先转es5在压缩js文件

//1.新建gulp任务
 gulp.task('test', function() {
    console.log('hello,gulp11111');
 });//执行任务在项目文件终端中输入 gulp test就会运行test任务
 
//2.将开发目录下面的文件复制到线上目录(无需插件)
gulp.task('copyfile', function() {
    gulp.src('src/*') //开发目录路径 *所有文件
        .pipe(gulp.dest('dist/src')); //输出路径
});

//3.压缩html
gulp.task('uglifyhtml', function() {
    return gulp.src('src/*.html')//src文件下的所有html文件
        .pipe(html()) //执行压缩
        .pipe(gulp.dest('dist/src'));//将压缩好html文件存放在src文件夹下
});

//4.sass编译--gulp-sass 注意有_开头命名的scss文件压缩不了
gulp.task('runsass', function() {
    return gulp.src('src/scss/*.scss')
        .pipe(gulpsass({
            outputStyle: 'compressed'
        })) //执行编译,compressed:压缩一行
        .pipe(gulp.dest('dist/src/sass'));
});

//5.合并
 gulp.task('alljs', function () {
	return gulp.src('src/js/*.js')
 		.pipe(concat('all.js')) //合并以及重命名
		.pipe(gulp.dest('dist/src/js')) //输出
 });
 
//6.压缩js
 gulp.task('uglifyjs', function() {
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/src/js'));
 })
 
//7.合并压缩js
 gulp.task('allminjs',function(){
	return gulp.src('src/js/*.js')
 	.pipe(concat('all.js'))//合并以及重命名
	.pipe(gulp.dest('dist/src/js'))//输出
 	.pipe(rename('all.min.js'))//重命名,为了后面压缩all.js
 	.pipe(uglify())//压缩
 	.pipe(gulp.dest('dist/src/js'));
 });

//8.图片的压缩--png
//如果插件安装不成功，可以在清除缓存之后继续按照 npm cache clean --force
 gulp.task('runimg', function() {
    return gulp.src('src/img/*.png')
         .pipe(imagemin())
         .pipe(gulp.dest('dist/img'));
 });
 
//9.es6转es5
//安装如下插件
//gulp-babele
//gulp-core   
//babel-preset-es2015
//注意"gulp-babel": "^7.0.1"要为7的版本如果为8则需要降低版本
**npm install gulp-babel@7 --save-dev

 gulp.task("babeljs", function() {
    gulp.src("src/js/*.js") //
        .pipe(babel({
            presets: ['es2015']//转es5语法
        }))
        .pipe(gulp.dest("dist/src/js"));
}); 

 gulp.task("watchjs",function(){
    gulp.watch('js/index.js',function(){
    	gulp.run('babeljs');
    });
});

//最终监听的写法
//监听里面的任务必须先跑一次。
 gulp.task('default',function(){
 	watch(['src/*.html','src/sass/*.scss','src/js/*.js'],gulp.parallel('uglifyhtml','runsass','uglifyjs'));  
	//添加了 gulp.series 和 gulp.parallel 方法用于组合任务
 	//watch的第一个参数监听的文件的路径，第二个参数是监听运行的任务名
	gulp.parallel() //–并行运行任务 
 	gulp.series() //–运行任务序列,拥有先后顺序。 
 });