gulp的使用

安装gulp需要node的环境，到官网https://nodejs.org/en/下载node，不知道怎么下，百度去

下载之后点击一路next，在安装的时候把node加到全局变量里面去。有这个选择。装好node,在cmd窗口里面node -v可以查看node的版本

npm -v可以查看npm的版本

然后安装gulp

npm install gulp -g全局安装gulp

在d盘建立一个gulpCode空文件夹。

cmd窗口中转d盘d:

进入gulpCode文件夹 cd gulpCode

npm init生成package.json

touch gulpfile.js生成gulpfile.js

然后安装一些插件，就可以实现自动化了。

gulpfile.js里面需要配置这些东西

//载入gulp核心包
const   gulp   = require("gulp");
const concat   = require('gulp-concat');
const uglify   = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const connect  = require("gulp-connect");
const htmlmin  = require("gulp-htmlmin");
var browserSync = require('browser-sync');
var reload = browserSync.reload;
//require的这些都是需要安装的插件，npm install 插件名 （--save-dev）括号里面的参数你写了就会在package.json里面有。

//gulp是用来帮我们执行一些重复操作
//如何定义一个任务
//第一个参数是任务名，第二个参数是任务的执行体
gulp.task('dest',function () {
//文件copy
gulp.src('src/**/*.*')//src下面所有目录文件
   //让文件流走向下一个环节
   .pipe(gulp.dest('dist/'))//dest指定文件输出地方


});
//让任务运行还是借助命令行
gulp.task('default',function(){
gulp.watch('src/*',['dest']);//第一个参数是任务发生的目录，第二个参数是任务的名字
});


// gulp.task('connect', function() {
//  connect.server({
//    root: 'src',
//    livereload: true
//  });
//       gulp.watch(['src/**/*.*'], ['reload']);   
// });


// gulp.task('reload', function () {
//   gulp.src('src/**/*.*')
//     .pipe(connect.reload());
// });


 //合并js
gulp.task("concat",function(){
  gulp.src(['src/js/*.js'])
     .pipe(concat("all.js"))
     .pipe(gulp.dest('dist/js'));
})
  //压缩单个js文件
gulp.task('jsmin',function(){
  gulp.src('dist/js/all.js')
     .pipe(uglify())
     .pipe(gulp.dest('dist/js'));
})
 // 压缩多个文件
gulp.task('jsmins',function(){
  gulp.src(['src/js/*.js'])
     .pipe(uglify())
     .pipe(gulp.dest('dist/js'));
})
//压缩图片
gulp.task('imagemin', () =>
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
gulp.task("htmlmin",function(){
var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('src/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist'));
});
// 起服务器监视文件改动并重新载入
gulp.task('server', function() {
  browserSync({
    server: {
      baseDir: 'src'
    }
  });


  gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd:"src"},reload);//options.cwd：输出文件夹的cwd，默认为：process.cwd()。

也可以  gulp.watch("src/**/*.*").on('change', browserSync.reload);
});

执行就是gulp 任务名。

补充一些cmd中经常用的切盘和目录的命令

cd  ..返回上一级

cd  /返回根目录，\也可以

d:进入d盘

cd gulpCode进入gulpCode目录下面