zoukankan      html  css  js  c++  java
  • gulp 粗粗学习 记录下

    看视频学习 粗粗记录下 以便以后学习

    1.初记录

    gulp.task //定义一个任务
    gulp.src //锁定到做task任务的文件路径
    gulp.dest //锁定到任务做完后文件去向的路径
    gulp.watch //监控的一个任务 可以看做一个人任务


    pipe:任务流的函数

    2.常用的方法记录

      需要把gulp 放在gulpfile.js

      

    // 定义一个任务 任务名:message  执行任务:gulp message 
    gulp.task('message', function(){
      return console.log('执行任务message'); 
    }); 

    // gulp拷贝 : 拷贝src文件里所有的html文件 到dist 去
    gulp.task('copyHtml', function(){
      gulp.src('src/*.html')
          .pipe(gulp.dest('dist'));
    });
    
    // 压缩图片 需要用到 gulp-imagemin 插件 需要先下载 npm i gulp-imagemin -D
    const imagemin = require('gulp-imagemin');
    gulp.task('imageMin', () =>
    	gulp.src('src/images/*')
    		.pipe(imagemin())
    		.pipe(gulp.dest('dist/images'))
    );
    
    // 压缩js
    const uglify = require('gulp-uglify'); //需要下载插件 gulp.task('minify', function(){ gulp.src('src/js/*.js') //目标目录 .pipe(uglify()) //经过 压缩插件 .pipe(gulp.dest('dist/js')); //输出到目标目录 }); // 合并scss
    const sass = require('gulp-sass'); //下载 转化SASS 插件 gulp.task('sass', function(){ gulp.src('src/sass/*.scss') //目标路径 .pipe(sass().on('error', sass.logError)) //经过 插件转化 有错话 打印 .pipe(gulp.dest('dist/css')); //输入到 目标路径下 后缀名也改成 .CSS }); // Scripts
    const concat = require('gulp-concat'); gulp.task('scripts', function(){ gulp.src('src/js/*.js')//目标路径 .pipe(concat('main.js')) //经过 合并插件 进行合并 .pipe(uglify())//进过压缩插件 进行压缩 .pipe(gulp.dest('dist/js')); 最后输出到目标路径 });
    //gulp 就能执行一些列任务 如下【任务数组】 gulp.task('default', ['message', 'copyHtml', 'imageMin', 'sass', 'scripts']);
    //监测 目标路径下 的文件 如果被修改了 然后就执行相关的任务 如下代码 gulp.task('watch', function(){ gulp.watch('src/js/*.js', ['scripts']); gulp.watch('src/images/*', ['imageMin']); gulp.watch('src/sass/*.scss', ['sass']); gulp.watch('src/*.html', ['copyHtml']); });

      

  • 相关阅读:
    利用pip安装Django
    flask_14:supervisor管理uwsgi+nginx
    virtualenv 虚拟环境安装
    Linux 新建/删除 文件/文件夹的命令
    flask_13_1:使用 supervisor 管理进程
    flask_13:使用 supervisor 管理进程
    Linux sudo命令
    flask_12:API服务器架设笔记(阿里云服务器 + flask + nginx + uwsig)
    flask_11:uWISG简介及配置介绍
    flask_10:Nginx和uWSGI服务器之间是如何通信的?
  • 原文地址:https://www.cnblogs.com/zhouhongdan/p/9112470.html
Copyright © 2011-2022 走看看