美文网首页我爱编程
Gulp 安装环境:

Gulp 安装环境:

作者: jslxm | 来源:发表于2018-04-09 20:04 被阅读0次

    Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 进行构建的。

    * 全局安装 (全局安装 是因为要使用 Gulp 命令,局部安装是因为要 压缩项目)

    npm install -g  gulp 

    * 本地安装

    npm install gulp--save-dev

    * 初始化项目

     npm init -y

    * 编写 gulpfile.js 文件 (在项目文件中创建gulpfile.js)

          创建具体的任务 (引入各种包)

    * 安装相应gulp任务插件

    npm install gulp-file-include gulp-less less gulp-autoprefixer gulp-cssmin gulp-uglify gulp-babel babel-core babel-preset-env gulp-htmlmin browser-sync --save-dev

     ******    gulpfile 文件:

    const path = require('path'); //路径

    const gulp = require('gulp'); // gulp本地包,用来提供api

     const less = require('gulp-less');  // 处理less

    const autoprefixer = require('gulp-autoprefixer');   // 自动添加兼容前缀

    const cssmin = require('gulp-cssmin');     // 压缩css

    const uglify = require('gulp-uglify');     // 压缩js

    const babel = require('gulp-babel');   // ES6语法转化

    const htmlmin = require('gulp-htmlmin');  // 压缩HTML

    const browserSync = require('browser-sync').create();const reload = browserSync.reload; // 调试

    // 处理css

    gulp.task('css',function(){

     gulp.src(path.join(__dirname,'src','css/*'))

    .pipe(less()).pipe(autoprefixer()).pipe(cssmin())

    .pipe(gulp.dest(path.join(__dirname,'dist','css')));})

    // 处理js

    gulp.task('js',function(){

    gulp.src(path.join(__dirname,'src','js/**/*.js'))

    .pipe(babel({presets: ['env']}))

    .pipe(uglify()).pipe(gulp.dest(path.join(__dirname,'dist','js')))})

    // 处理html

    gulp.task('html',function(){

    gulp.src(path.join(__dirname, 'src/view/*.html'))

    .pipe(htmlmin({                       // 把html交给htmlmin插件处理     

    collapseWhitespace:true,        // 设置参数去除空白   

      minifyJS:true,                     // 压缩html中的js   

      minifyCSS:true,                 // 压缩html中的css     

    removeComments:true      // 去除html注释   

    })).pipe(gulp.dest(path.join('dist')));})

    gulp.task('build',['css','js','html']);

    // 调试

    gulp.task('dev',['build'],function(){

    browserSync.init({

    server: {baseDir:"./dist"         // 监控目录的基准路径   

    },   

    port:8888,                              // 配置服务端口   

    notify:false                          // 设置页面是否有提示信息 

    }); 

    // 具体监听什么 

    gulp.watch(path.join(__dirname,'src',"view/**/*"), ['html']).on('change', reload); 

    gulp.watch(path.join(__dirname,'src',"css/**/*"), ['css']).on('change', reload); 

    gulp.watch(path.join(__dirname,'src',"js/**/*"), ['js']).on('change', reload);});

    // 默认任务配置

    gulp.task('default',['dev'])

    相关文章

      网友评论

        本文标题:Gulp 安装环境:

        本文链接:https://www.haomeiwen.com/subject/fhpihftx.html