zoukankan      html  css  js  c++  java
  • gulp点滴



    var gulp = require('gulp'), connect = require('gulp-connect'), browserify = require('gulp-browserify'), concat = require('gulp-concat'), port = process.env.port || 5000; gulp.task('browserify',function(){ gulp.src('./app/js/main.js') .pipe(browserify({ transform: 'reactify', })) .pipe(gulp.dest('./dist/js')) }); // live reload gulp.task('connect',function(){ connect.server({ // root:'./', port: port, livereload: true, }) }) // reload Js gulp.task('js',function(){ gulp.src('./dist/**/*.js') .pipe( connect.reload() ) }) gulp.task('html',function(){ gulp.src('./app/**/*.html') .pipe( connect.reload() ) }); gulp.task('watch',function(){ gulp.watch('./dist/**/*.js',['js']); gulp.watch('./app/**/*.html',['html']); gulp.watch('./app/js/**/*.js',['browserify']); }) gulp.task('default',['browserify']); gulp.task('serve',['browserify','connect','watch']);

    转载:http://www.tuicool.com/articles/FJVNZf  

    需要熟记的5个函数;

    gulp只有五个方法: task , run , watch , src ,和 dest ,在项目根目录新建一个js文件并命名为 gulpfile.js 

    // 引入 gulp
    var gulp = require('gulp'); 
    
    // 引入组件
    //var jshint = require('gulp-jshint');
    var sass = require('gulp-sass');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    
    // 检查脚本
    /*gulp.task('lint', function() {
        gulp.src('./js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'));
    });*/
    
    // 编译Sass
    gulp.task('sass', function() {
        gulp.src('./sass/*.sass')
            .pipe(sass())
            .pipe(gulp.dest('./css'))
            .pipe(rename('all.min.css'))
             .pipe(gulp.dest('./css'));
    });
    
    // 合并,压缩文件
    gulp.task('scripts', function() {
        gulp.src('./js/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./dist'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist'));
    });
    
    // 默认任务
    gulp.task('default', function(){
        gulp.run('sass', 'scripts');
    
        // 监听文件变化
        gulp.watch('./js/*.js', function(){
            gulp.run('sass', 'scripts');
        });
    });
  • 相关阅读:
    面向过程(或者叫结构化)分析方法与面向对象分析方法到底区别在哪里?请根据自己的理解简明扼要的回答
    当下大部分互联网创业公司为什么都愿意采用增量模型来做开发?
    0
    计算机网络
    java基础
    java 多线程编程
    java类与对象,用程序解释
    修饰符的探讨
    java学习总结02
    java day1
  • 原文地址:https://www.cnblogs.com/coding4/p/6511886.html
Copyright © 2011-2022 走看看