gulp使用步骤

最新推荐文章于 2024-12-26 10:36:21 发布

原创最新推荐文章于 2024-12-26 10:36:21 发布 · 737 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#gulp

1.安装nodejs

2.全局安装gulp

$ cnpm install -g gulp

3.定位目录

$ cd E:\www\gulpDemo

4.创建pakage.json配置文件

$ cnpm init

5.安装gulp到项目本地

$ cnpm install --save-dev

6.安装gulp插件（依赖）

$ npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-livereload --save-dev

7.在根目录新建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');
var livereload = require('gulp-livereload');


// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .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('watch', function() {
    livereload.listen();
    gulp.watch('gulpDemo/**/*.*',function(file){
        livereload.changed(file.path);
    });
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts','watch');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

8.运行gulp任务

$ gulp

9.另外，使用livereload的步骤如下：

（1）首先要安装gulp-livereload，如上面第七步，也可以单独安装，如下：

    cnpm install gulp-livereload

（2）然后配置写入gulpfile.js，看上面第8步，如下：

    var gulp = require('gulp'),
    livereload = require('gulp-livereload');

    gulp.task('watch', function() {
        livereload.listen();
        gulp.watch('gulpDemo/**/*.*',function(file){
            livereload.changed(file.path);
        });
    });

（3）安装http-server,并执行：

    $ http-server

（4）在项目根目录下，执行：

   $ gulp watch

http-server默认端口是8080,所以可以通过访问localhost:8080找到你要的自动刷新的那个demo文件。再确保已经安装了liveReload插件～点开它,然后你就可以尽情的保存保存了～会刷新。。尊的不用F5 || cmd R了。。

10.使用browser-sync

首先，您需要安装 Browsersync 。如果你是第一次安装，那么你可以通过–save-dev命令，这将会自动在你的package.json里添加依赖，下一次再安装时，你只需要npm install

$ npm install browser-sync --save-dev

然后，在您的 gulpfile.js 文件里使用它们。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    var files = [
        '**/*.html',
        '**/*.css',
        '**/*.js'
    ];
    browserSync.init(files, {
        server: {
            baseDir: "./",
            index: 'jd.html'
        }
    });
});
gulp.task('default', ['browser-sync']); //定义默认任务