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');
        });
    });
  • 相关阅读:
    元素设置float属性后,其后面的元素的位置问题
    Vue.js经典开源项目汇总
    ES6-模块导入导出
    JavaScript内存泄漏
    父元素高度比子元素高度多几个像素的解决方法
    jasmine —— Spies(转)
    用npm-run自动化任务(转)
    AngularJS中页面传参方法
    Path模块部分常用函数解析——NodeJS
    html特殊字符表
  • 原文地址:https://www.cnblogs.com/coding4/p/6511886.html
Copyright © 2011-2022 走看看