zoukankan      html  css  js  c++  java
  • gulp

    详情请参见github:

      https://github.com/Sunnshino/gulpjs-plugs

      1 /*
      2     目录结构:
      3         test(主目录)
      4             src(输入路径)
      5                 index.html(主页面)
      6                 js(文件夹)
      7                 less(文件夹)
      8                 images(文件夹)
      9                 html(文件夹)
     10             dest(输出路径)
     11                 js(文件夹)
     12                 less(文件夹)
     13                 img(文件夹)
     14                 html(文件夹)
     15                 
     16         说明:
     17         paths里面有:
     18             script:
     19                 src:来自路径
     20                 dest:目的路径
     21                 watch:监听路径
     22 */
     23 let gulp = require('gulp'),
     24     del = require('del'),
     25     browserSync = require("browser-sync").create();
     26 let $ = require('gulp-load-plugins')();
     27 
     28 
     29 // 路径选项
     30 var paths = {
     31     script: {
     32         src: 'src/js/*.js',
     33         dest: 'dest/js/',
     34         watch: 'src/js/*.js'
     35     },
     36     less: {
     37         src: 'src/less/*.less',
     38         dest: 'dest/less/',
     39         watch: 'src/less'
     40     },
     41     images: {
     42         src: 'src/images/*.*',
     43         dest: 'dest/img/',
     44         watch: 'src/images/*.*'
     45     },
     46     html: {
     47         src: 'src/html/*.html',
     48         dest: 'dest/html',
     49         watch: 'src/*.html'
     50     }
     51 };
     52 
     53 gulp.task('delete', function(cb) {
     54     return del(['dest/*', '!dest/images'], cb);
     55 });
     56 
     57 
     58 // 文件热更新
     59 // gulp.task('reload', function() {
     60 //     gulp.src('/')
     61 //         .pipe($.connect.reload())
     62 //     console.log('html change!')
     63 // });
     64 
     65 //压缩html  
     66 gulp.task('html', function() {
     67     var options = {
     68         removeComments: true,
     69         collapseWhitespace: true,
     70         removeScriptTypeAttributes: true,
     71         removeStyleLinkTypeAttributes: true,
     72         minifyJS: true,
     73         minifyCSS: true
     74     };
     75     // 来自
     76     gulp.src('src/index.html')
     77         .pipe($.changed('dest', { hasChanged: $.changed.compareSha1Digest }))
     78         .pipe($.htmlmin(options))
     79         .pipe(gulp.dest('dest'))
     80         .pipe(browserSync.reload({ stream: true }));
     81 });
     82 
     83 
     84 //压缩js以及重命名 
     85 gulp.task("script", function() {
     86     // 来自路径
     87     gulp.src(['src/js/jquery.js', 'src/js/index.js'])
     88         .pipe($.changed(paths.script.dest, { hasChanged: $.changed.compareSha1Digest }))
     89         .pipe($.jshint())
     90         .pipe($.babel())
     91         .pipe($.jshint.reporter())
     92         .pipe($.concat('index.js'))
     93         .pipe($.uglify())
     94         .pipe($.rename('index.min.js'))
     95         .pipe($.obfuscate())
     96         .pipe(gulp.dest(paths.script.dest))
     97         .pipe(browserSync.reload({ stream: true }));
     98 });
     99 
    100 //实时编译less  
    101 gulp.task('less', function() {
    102     gulp.src([paths.less.src])
    103         .pipe($.changed(paths.less.src, { hasChanged: $.changed.compareSha1Digest }))
    104         .pipe($.less())
    105         .pipe($.tobase64({
    106             maxsize: 8
    107         }))
    108         .pipe($.concat('main.css'))
    109         .pipe($.cleanCss())
    110         .pipe(gulp.dest(paths.less.dest))
    111         .pipe(browserSync.reload({ stream: true }));
    112 });
    113 
    114 
    115 // 压缩图片  
    116 gulp.task('images', function() {
    117     gulp.src(paths.images.src)
    118         .pipe($.changed(paths.images.dest, { hasChanged: $.changed.compareSha1Digest }))
    119         .pipe($.imagemin({
    120             progressive: true,
    121             svgoPlugins: [{ removeViewBox: false }],
    122             // use: [$.imageminPngquant()]
    123         }))
    124         .pipe(gulp.dest(paths.images.dest))
    125         .pipe(browserSync.reload({ stream: true }));
    126 });
    127 
    128 //启动服务器热加载  
    129 gulp.task('server', ['delete'], function() {
    130     gulp.start('html', 'less', 'script', 'images');
    131     browserSync.init({
    132         port: 8088,
    133         server: {
    134             baseDir: ['dest']
    135         },
    136         livereload: true
    137     });
    138 
    139     //监控文件变化,自动更新(自添加规则) 
    140     gulp.watch(paths.script.watch, ['script']);
    141     gulp.watch(paths.less.watch, ['less']);
    142     gulp.watch(paths.html.watch, ['html']);
    143     gulp.watch(paths.images.watch, ['images']);
    144 });
    145 
    146 gulp.task('default', ['server']);
  • 相关阅读:
    ....
    CodeForces 375A(同余)
    POJ 2377 Bad Cowtractors (最小生成树)
    POJ 1258 AgriNet (最小生成树)
    HDU 1016 Prime Ring Problem(全排列)
    HDU 4460 Friend Chains(bfs)
    POJ 2236 Wireless Network(并查集)
    POJ 2100 Graveyard Design(尺取)
    POJ 2110 Mountain Walking(二分/bfs)
    CodeForces 1059B Forgery(模拟)
  • 原文地址:https://www.cnblogs.com/cisum/p/7754246.html
Copyright © 2011-2022 走看看