gulp

如果有补充请留言，如果有错误请指出来 谢谢!!! 本人初学者

gulp的安装
gulp安装前的环境配置，安装gulp的前提是你已经有了nodejs的运行环境
查看是否安装了nodejs node -v
如果没有安装node，就去官网下载一下安装
以上步骤完成之后，先初始化一下npm init,然后再全局安装 npm install -g gulp-cli
全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp --save-dev

-g:全局
--save-dev : 项目开发环境（页面中要引用）
--save : 项目运行环境`

使用gulp
先在你这个目录下新建一个gulpfile.js的文件，里面写我们定义的任务 注意：你可以自己起一个任务名，运行的时候，直接在命令行输入gulp 任名，gulp也给我们定义了一个默认任务名default,如果任务名为default,直接在命令行输入gulp即可

1.对css语法进行压缩和混淆

var sass = require('gulp-sass')
gulp.task('mycss',function(){
    gulp.src('./src/css/*.scss') //原代码文件
        .pipe(sass()
            .on('error',sass.logError) //编译报错，watch监听任务不中断
        )
        .pipe(gulp.dest('./dist/css')) //放编译后文件
})

2.对html代码进行压缩

var htmlmin = require('gulp-htmlmin');
gulp.task('myhtml',function(){
    gulp.src('./src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true  //css输出的格式
        }))
        .pipe(gulp.dest('./dist'))
})

3.对js代码进行压缩

var uglify = require('gulp-uglify');
gulp.task('myjs',function(){
    gulp.src('./src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
})

4.对图片进行压缩

var imagemin = require('gulp-imagemin')

gulp.task('myimg',function(){
    gulp.src('./src/img/*.+(png|img|gif|svg)')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'))
})

5.监视文件变化然后自动执行相应的任务

gulp.task('mywatch', function(){
    
   gulp.watch('./src/*/*.*',['mycss','myhtml','myjs','myimg'])
})

6.合并代码

var htmlReplace = require('gulp-html-replace')

gulp.task('html',function(){
    gulp.src('./src/index.html')
         .pipe(htmlReplace({
            header: gulp.src('./src/header.html'),
            
            indexcss:{
                src: gulp.src('./src/css/index.scss').pipe( sass({outputStyle: 'compressed'}) ),
                tpl: ''
            }
        }))
        .pipe( gulp.dest('./dist') )
})