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'));
4000

})

 // 压缩多个文件

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目录下面